Javascript jQuery：将点击事件添加到特定的 id

jQuery: add click event to specific id

提问by mangotasche

I have a small jquery problem:

我有一个小的 jquery 问题：

My code is like this:

我的代码是这样的：

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

I have throughout my document several select-word-link and select divs.

我在整个文档中有几个 select-word-link 和 select div。

I want to add a click event to the first div, that reacts just to the second div.

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

My idea was to loop through all the "select-x" elements, but i think there is a much better way?

我的想法是遍历所有“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");

        });

    });


});

回答by Bob van Luijt

You can do this easier by triggering an action on an event.

您可以通过触发对事件的操作来更轻松地完成此操作。

$('#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.
});

Info: http://api.jquery.com/trigger/

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

More advanced:

更先进：

$('#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.
});

回答by morteza hosseini

maybe this code help you

也许这段代码可以帮助你

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

});

});

回答by Parth Trivedi

You have to trigger click next()element not all .select

你必须触发点击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>

回答by Jalal Mostafa

jQuery as CSS uses #selector to identify that this string is an Id. e.g.

jQuery as CSS 使用#选择器来识别这个字符串是一个 Id。例如

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

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

and you execute this code:

然后执行此代码：

$('#someId')

this will select the DOM object that has the Id someId

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

while idproperty returns the id of the DOM object without the selector #i.e. this jQuery code:

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

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

will initialize the variable idto 'someId'

将变量初始化id为'someId'

Thus, in your code add '#'in the selector

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

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

        });

回答by Peter Wilson

try

尝试

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