我如何編碼特定選擇器？

-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

我如何編碼特定選擇器？

回答

相關問題