jQuery:将click事件添加到特定id

时间:2016-02-07 10:32:30

标签: javascript jquery html css

我有一个小的jquery问题:

我的代码是这样的:

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

我的文档中有几个select-word-link和select divs。

我想在第一个div中添加一个click事件,它只对第二个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");

        });

    });


});

6 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:1)

也许这段代码可以帮助你

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

});

答案 2 :(得分:0)

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

答案 3 :(得分:0)

You have to trigger click next() element not all .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>

答案 4 :(得分:0)

jQuery,因为CSS使用#选择器来识别此字符串是Id。 e.g。

<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");

        });

答案 5 :(得分:0)

非常简单的解决方案

14:06:14,859 WARN  [AggTableManager] Recognizer.checkUnusedColumns: Candidate aggregate table 'agg_days_flattened' for fact table 'flattened' has a column 'dayofMonth' with unknown usage.
14:06:14,860 WARN  [AggTableManager] Recognizer.checkUnusedColumns: Candidate aggregate table 'agg_days_flattened' for fact table 'flattened' has a column 'month' with unknown usage.
14:06:14,860 WARN  [AggTableManager] Recognizer.checkUnusedColumns: Candidate aggregate table 'agg_days_flattened' for fact table 'flattened' has a column 'year' with unknown usage.

如果您要从2个或多个不同的div ID或类或两者的组合中触发相同的功能,则将其分隔开,例如'#select-5,.select-word-link',如上例所示。