你好我的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>
答案 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>
。
希望这有帮助。
SYSTEM.Grid.load(urlLoad);
SYSTEM.Grid.forEachRow(function(id){
console.log("teste");
}
&#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;
});
});
没有得到原始链接,但这里是相应的小提琴: