использовать функцию возврата sinde .attr() элемент jquery

Question

На моем веб-сайте я включил поле ввода и кнопку. Поле ввода используется для ввода видеоконтента YouTube. Нажав на кнопку, я хочу, чтобы мой сайт создавал новый href с помощью «www.youtube.com/watch?v=» и добавлял к нему любой код, введенный в поле ввода. Затем видеоизображение youtube должно открываться внутри лайтбокса (используя prettyPhoto, который я уже установил и который работает отлично).

Это код, который я до сих пор:

<div> 
 
    <br> 
 
    <input type="text" style="text-align:center" placeholder="Video Code" id="code_input"> 
 
    <br> 
 
    <br> 
 
    <div> 
 
     <a href="#" id="youtube" rel="prettyPhoto"> 
 
      <button type="button" id="button" onclick="MyFunction">Jetzt anschauen!</button> 
 
      <script type="text/javascript"> 
 
       function MyFunction() { 
 
        var baselink="https://www.youtube.com/watch?v="; 
 
        var youtube_code=document.getElementById("code_input").value; 
 
        var new_link=baselink.concat(youtube_code); 
 
       } 
 
       $('#youtube').attr("href", function() { 
 
        return new_link; 
 
       }); 
 
      </script> 
 
     </a> 
 
    </div> 
 
</div>

Всякий раз, когда я ввожу код Видеосервис YouTube и нажмите на кнопку, лайтбокс открывается, но возвращает следующее:

Screenshot

Не могли бы вы любезно взглянуть на мой код и сообщить мне, куда я иду неправильно? Или любезно объясните мне, как я могу динамически создавать новый href, основанный на данных поля ввода и как передать это в тег.

Большое спасибо за помощь!

Answer 1

Найдено, что следующий код решает эту проблему:

<div> 
 
\t <br> 
 
    <input type="text" style="text-align:center" placeholder="Video Code" id="code_input"> 
 
    <br> 
 
    <br> 
 
    <div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">    </script> 
 
     <script type="text/javascript"> 
 
\t   $(document).ready(function(){ 
 
\t   $("button").click(function(){ 
 
\t   var ycode = document.getElementById("code_input").value; 
 
\t   $('#youtube').attr("href", function(){ 
 
\t   return "https://www.youtube.com/watch?v=" + ycode; 
 
\t \t    }); \t \t 
 
\t    }); 
 
      }); 
 
     </script> 
 
<a href="#" id="youtube" data-lity> 
 
<button type="button" id="button">Jetzt anschauen!</button> 
 
</a> 
 
</div> 
 
</div>

Answer 2

Проблема заключается в том, что ваша new_link переменная создается внутри функции, так что это не достижимо из-за пределов его масштабы.

Я предложил бы использовать событие изменения для поля ввода, чтобы обеспечить HREF атрибута кнопки будет обновлен до щелкают:

<div> 
     <input type="text" style="text-align:center" placeholder="Video Code" id="code_input"> 
     <div> 
      <a href="#" id="youtube" rel="prettyPhoto"> 
       Jetzt anschauen!  
      </a> 
     </div> 
    </div> 


$('#code_input').on('change', changeLink); 

function changeLink() { 
    var baselink="https://www.youtube.com/watch?v="; 
    var youtube_code = document.getElementById("code_input").value; 
    var new_link = baselink.concat(youtube_code); 
    $('#youtube').attr("href", new_link); 
} 

Кроме того, этот способ вам не нужно добавить, чтобы использовать встроенный JavaScript прослушиватель событий.

Кроме того, вставка элемента кнопки внутри ссылки недействительна HTML, поэтому вам следует рассмотреть возможность ее удаления.