我如何编码特定的选择器?

时间:2017-04-25 12:49:00

标签: jquery selector

你好我的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>

3 个答案:

答案 0 :(得分:1)

建议的答案: 重复的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>

答案 1 :(得分:0)

如果您将ID更改为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>

希望这有帮助。

&#13;
&#13;
SYSTEM.Grid.load(urlLoad);


 SYSTEM.Grid.forEachRow(function(id){
    console.log("teste");
}
&#13;
&#13;
&#13;

答案 2 :(得分:0)

经过一些进一步的研究后,我发现这个解决方案非常适合我的问题:

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;  
  });  
});  

没有得到原始链接,但这里是相应的小提琴:

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