我如何编码特定选择器？

-1

你好，我有一个jQuery中的选择器的问题。我在下面做了一个简单的例子，在这里你可以点击按钮并改变按钮旁边目标的颜色。我无法指定像class =“target1”和class =“target2”的目标。我如何编码特定选择器？

我真的不明白为什么它只适用于第一个按钮...我必须更改以通过相应的按钮来更改颜色？

非常感谢您的努力！

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 

 
$("#dialog-link").click(function(event) { 
 
    $(this).next(".start:first").css({"color": "red", "border": "2px solid red"}); 
 
});  
 
    
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<button id="dialog-link">click me1</button> 
 
<div style="width:500px;" class="start"> 
 
Target1 
 
</div> 
 
<button id="dialog-link">click me2</button> 
 
<div style="width:500px;" class="start"> 
 
Target2 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-04-25 Rei.M

你不应该有两个HTML的id同名。如果你想将它们改为类名。 –

id应该是唯一的 – Durga

建议答案：重复的ID无效HTML，当它涉及到的脚本会导致一些问题。尽可能避免。将你的ID改为类，然后将你的jquery选择器改为类选择器（“。”）。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 

 
$(".dialog-link").click(function(event) { 
 
    $(this).next(".start:first").css({"color": "red", "border": "2px solid red"}); 
 
});  
 
    
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<button class="dialog-link">click me1</button> 
 
<div style="width:500px;" class="start"> 
 
Target1 
 
</div> 
 
<button class="dialog-link">click me2</button> 
 
<div style="width:500px;" class="start"> 
 
Target2 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-04-25 12:53:04

请重温HTML，JQuery基础知识！ –

*“建议的答案”*没有说明有什么不同或为什么它有帮助 – charlietfl

并请删除居高临下的评论，这是非常感谢您的 – charlietfl

如果更改ID s到classes它的工作原理。 ID必须是唯一的 - 如果要将其应用于多个元素，则使用classes。

不要忘了更改jQuery选择器;从#dialog-link到.dialog-link。

希望这会有所帮助。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 

 
$(".dialog-link").click(function(event) { 
 
    $(this).next(".start:first").css({"color": "red", "border": "2px solid red"}); 
 
});  
 
    
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<button class="dialog-link">click me1</button> 
 
<div style="width:500px;" class="start"> 
 
Target1 
 
</div> 
 
<button class="dialog-link">click me2</button> 
 
<div style="width:500px;" class="start"> 
 
Target2 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-04-25 12:53:15 blackandorangecat

非常感谢你 –

经过进一步的研究，我发现这个解决方案，适合适合我的问题：

HTML：

<span class="helpButton">Button</span> 
<div class="helpDialog">Help Content</div> 
<span class="helpButton">Button 2</span> 
<div class="helpDialog">Help Content 2</div> 
<span class="helpButton">Button 3</span> 
<div class="helpDialog">Help Content 3</div>

的javascript：

jQuery(function($) { 
    $('.helpButton').each(function() { 
    $.data(this, 'dialog', 
     $(this).next('.helpDialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     title: 'Info', 
     width: 600, 
     height: 400, 
     position: [200,0], 
     draggable: false 
     }) 
    ); 
    }).click(function() { 
     $.data(this, 'dialog').dialog('open'); 
     return false; 
    }); 
});

didnt得到原始链接了，但这里是相应的小提琴：

http://jsfiddle.net/nick_craver/ZwLcE/

来源

2017-05-03 13:31:14

我如何编码特定选择器？

回答

相关问题