gpt4 book ai didi

javascript - 将变量传递给嵌套 jQuery 函数

转载 作者:行者123 更新时间:2023-12-03 06:43:09 25 4
gpt4 key购买 nike

我有两个输入字段,当它们填充文本时,每个字段都会动态生成一个带有红叉的小图像。这个想法是用户可以通过单击该图像来清除文本。 javascript代码完全相同,唯一的区别是图像的alt值和输入框的name属性

<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script>
$( document ).ready(function() {

$("input[type='text']").keyup(function(){
var alt = "clear"+$(this).attr("name");
if($(this).val() && !$("img[alt='"+alt+"']").length){
$(this).after("<img src='images/cross.png' alt='"+alt+"'/>");
}
});

$(document).on('click', 'img[alt="clearsource"]' , function(){
$( "input[name='source']" ).val('');
$(this).remove();
});

$(document).on('click', 'img[alt="clearlocation"]' , function(){
$( "input[name='location']" ).val('');
$(this).remove();
});
});
</script>
</head>
<body>
<form>
<input type="text" name="source" placeholder="Source" /><br />
<input type="text" name="location" placeholder="Location" />
</form>
</body>
</html>

我想创建一个可重用的函数,通过它我可以传递两个变量,然后调用它两次。这是我的尝试,但没有成功。有人可以帮忙吗?是范围问题吗?

这是 JSFiddle 版本:https://jsfiddle.net/2bk86w4y/

<script>
$( document ).ready(function() {

$("input[type='text']").keyup(function(){
var alt = "clear"+$(this).attr("name");
if($(this).val() && !$("img[alt='"+alt+"']").length){
$(this).after("<img src='images/cross.png' alt='"+alt+"'/>");
}
});

// == The function below replaces the duplicate functions in the previous code block.
// == Unfortunately it doesn't work. Please help :(

function clearBox(inputname,imagealt){
$(document).on("click", "img[alt='"+imagealt+"']" , function(){
$( "input[name='"+inputname+"']" ).val('');
$(this).remove();
});
}

clearBox("clearsource","source");
clearBox("clearlocation","location");
});
</script>

非常感谢!

最佳答案

您的参数设置错误。

https://jsfiddle.net/daveSalomon/2bk86w4y/1/

clearBox("clearsource", "source");
clearBox("clearlocation", "location");

// should be...

clearBox("source", "clearsource");
clearBox("location", "clearlocation");

关于javascript - 将变量传递给嵌套 jQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37862404/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com