4

想象一下：我有多个带有 attr“data-question-id”的 div，在这个 div 中我有一个或多个输入，可能有也可能没有 attr“has-next-question”。请参见下面的示例：

<div data-question-id="5">
<input type="radio" has-next-question="true" value="2"> test1
<input type="radio" value="3"> test2
</div>

<div data-question-id="6">
<input type="radio" has-next-question="true" value="5"> test3
<input type="radio" has-next-question="true" value="7"> test4
</div>

正如您在第一个 div 中看到的那样，我有两个输入，但一个没有 attr“has-next-question”。我的问题是，我如何在输入上绑定一个单击事件，该输入具有一个带有 attr“data-question-id”的父 div，并且这个 div 至少有一个带有 attr“has-next-question”的输入。

我已经做到了：

$(document).on('click', 'div[data-question-id] input', function(e) {
          alert('click');
});

有什么帮助吗？多谢你们

编辑：更改了 attr “has-next-question”，因为它是无效的 html 属性。

想象一下：如果我点击“test1”它应该触发事件，但是如果我点击“test2”它也应该触发事件，因为带有 attr “data-question-id”的父 div 至少有一个带有 attr “has -next-question”，对应于“test1”。如果父 div 中没有带有 attr“has-next-question”的输入，则不应触发该事件。

4

3 回答 3

3

你这样做是为了div，所以重复它。

div[data-question-id] input[has-next-question]

演示

于 2013-03-28T18:02:20.653 回答
1

只需扩展您的选择器：

$(document).on('click', "div[data-question-id] input[has-next-question='true']", function(e) {
          alert('click');
});
于 2013-03-28T18:02:39.607 回答
1

它不正确的html。has-next-question不是有效的属性。

但这应该工作，

$(document).on('click', 'div[data-question-id] input[has-next-question]', function(e) {
          alert('click');
});

编辑：（更改原始问题后），

不，您不能从中制作选择器。jQuery 使用 CSS 选择器，它们不能从子级到父级。

但是，你可以做这样的事情，

$(document).on('click', 'div[data-question-id] input', function(e) {
       if($(this).parent().find('[has-next-question]').length === 0 ) return;

       // Other code which needs to be executed.
});

即如果父级没有具有[has-next-question]属性的子级，则从函数中出来。

于 2013-03-28T18:03:04.973 回答