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

use return function sinde .attr() jquery element

本文关键字：jquery 元素 attr sinde 返回 函数      更新时间：2023-09-26

在我的网站上，我包含了一个输入字段和一个按钮。输入字段用于输入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视频代码并点击按钮时，灯箱就会打开，但会返回以下内容：

屏幕截图

有人能看看我的代码，告诉我哪里出了问题吗？或者请向我解释如何根据输入字段数据动态创建新的href，以及如何将其输入到标记中。

非常感谢你的帮助！！

发现以下代码解决了问题：

<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>

问题是您的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，因此您应该考虑将其删除

相关文章：