jQuery：将单击事件添加到特定ID

Question

jQuery：将单击事件添加到特定ID

8

我有一个小的jQuery问题：

我的代码如下：

<div id="select-word-5" class="select-word-link"> - some content - </div>
<div id="select-5" class="select"> - some content - </div>

我在文档中有几个选择词链接和选择div。

我想在第一个div上添加一个点击事件，只对第二个div做出反应。

我的想法是循环遍历所有的“select-x”元素，但我认为还有更好的方法吗？

$('.select-word-link').each(function()
{

    var id = this.id;
    var idLink = this.id.replace("-word", "");


    $('.select').each(function()
    {

        if (idLink == this.id)
        {


          $(id).click(function() {
            alert("this does not work");

        });

    });


});

- mangotasche

1

IDs必须是唯一的。使用class。
将事件添加到嵌套元素中，并使用stopPropagation防止冒泡。

- mplungjan

你想添加一个点击监听器吗？如果是的话，你需要使用 on('click', function() {}) 语法。另外，如果你的 HTML 将两个 div 放在一起，你也可以简单地使用 next/prev 函数。 - Laurent Fauvel

作为对我的回答的补充，我认为可能有一种更简单的方法来解决你的问题全部一次性解决；-) - Bob van Luijt

6个回答

1

也许这段代码可以帮到你。

    $(".select-word-link").click(function(){
    $(this).next().hide();
});

});

- morteza hosseini

0

尝试

$('.select-word-link').first().on('click',function(){
   // you code goes here
})

- Peter Wilson

这不会只选择具有类 select-word-link 的第一个元素吗？ - Frank Fajardo

0

jQuery 作为 CSS 使用 # 选择器来识别字符串为 Id。

例如：

<div id="someId"></div>

当你执行这段代码时：

$('#someId')

这将选择具有Id someId 的DOM对象

而id属性返回没有选择器#的DOM对象的id，即此jQuery代码：

var id = $('#someId').get(0).id

将变量id初始化为'someId'

因此，在您的代码中在选择器中添加'#'

$('#' + id).click(function() {
            alert("this does not work");

        });

- Jalal Mostafa

0

你需要触发点击 next() 元素，而不是所有的 .select

$(".word").click(function() {
  var selectId = this.id.replace('-word', '');
  console.log(selectId);
   $('#'+selectId).trigger('click');
});

$(".next").click(function() {
  alert($(this).html());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-word-5" class="select-word-link word">- some content 5-</div>
<div id="select-word-6" class="select-word-link word">- some content 6-</div>
<div id="select-word-7" class="select-word-link word">- some content 7-</div>etc.
<div id="select-5" class="select-word-link next">- some content next 5-</div>
<div id="select-6" class="select-word-link next">- some content next 6-</div>
<div id="select-7" class="select-word-link next">- some content next 7-</div>

- Parth Trivedi

你可以找到下一个 .select。 - Parth Trivedi

问题在于，select并不总是下一个元素。我的代码看起来像这样：`<div id="select-word-5" class="select-word-link"> - 一些内容 - </div><div id="select-word-6" class="select-word-link"> - 一些内容 - </div> <div id="select-word-7" class="select-word-link"> - 一些内容 - </div> 等等。<div id="select-5" class="select-word-link"> - 一些内容 - </div> <div id="select-6" class="select-word-link"> - 一些内容 - </div> <div id="select-7" class="select-word-link"> - 一些内容 - </div>` - mangotasche

根据 select-word-link 绑定点击事件会递归地触发多次点击。您可以通过将两个类 word 和 next 添加到元素中并触发特定的点击来实现这一点。 - Parth Trivedi

执行 console.log(selectId); 你会发现 select-word-link 触发了没有 word 的 div 上的 select-word-link 自身，导致递归点击触发。这样做不仅无法正常工作，而且是一种糟糕的编码方式。 - Parth Trivedi

在你的问题中，你有 .select 和 .select-word-link，但在你的评论中，你只有 select-word-link。如果你只有所有的 select-word-link，那么它会进行递归调用，否则它可以正常工作。@mangotasche - Parth Trivedi

0

非常简单的解决方案

$('#select-5 , .select-word-link').click(function () {
// your code
});

如果您想从2个或更多不同的div id或类或两者的组合中触发相同的功能，则将它们用逗号分隔，例如在上面的示例中所示：'#select-5，.select-word-link'。

- Yogendra Tomar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bob van Luijt · Accepted Answer

通过在事件上触发动作，您可以更轻松地完成此操作。

$('#select-5').click(function(){
    alert('Does this work?');
});

$('.select-word-link').click(function(){
    $('#select-5').trigger('click'); // will behave as if #select-5 is clicked.
});

信息：http://api.jquery.com/trigger/

更进一步：

$('#select-5').click(function(){
    alert('Does this work?');
});

$('#select-6').click(function(){
    alert('Does this work?');
});

// etc

$('.select-word-link').click(function(){
    var selectId  = this.id.replace('-word', '');
    $('#'+selectId).trigger('click'); // will behave as if #select-5 is clicked.
});