Question

在我的网站上，我添加了一个输入字段和一个按钮。输入字段用于输入youtube视频代码。单击按钮后，我希望我的网站使用“www.youtube.com/watch?v=”创建新的href，并在输入字段中输入任何代码。然后，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>
	<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">
	        $(document).ready(function(){
	        $("button").click(function(){
	        var ycode = document.getElementById("code_input").value;
	        $('#youtube').attr("href", function(){
	        return  "https://www.youtube.com/watch?v=" + ycode;
		            });		
	            });
            });
        </script>
<a href="#" id="youtube" data-lity>
<button type="button" id="button">Jetzt anschauen!</button>
</a>
</div>
</div>

Answer 2

问题是你的new_link变量是在函数内部创建的，所以它不能从它的范围之外到达。

我建议在输入字段中使用change事件，以确保按钮的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，因此您应该考虑将其删除。

使用返回函数sinde .attr（）jquery元素

2 个答案: