Question

我有两个标题为“显示选项”的图像，如下所示：

<a class="io-content-pane-header-button-right" style="right: 41px;"><img class="io-content-pane-header-button" src="/document/c947bf0e-0144-4fc8-8a33-ce0d0d698384/latest" title="Show Options"></a>

单击此图像时，我有以下jQuery显示另一个名为“recordViewPopover”的div。

$('img[title*=\"Show\"]').live('click', function(e) {
    console.log('RECORD VIEW OPTION SELECTED!');
     e.stopImmediatePropagation();      
    var position = $(this).parent().offset(); 
    $('#recordViewPopover').css('top', (position.top + $(this).height()) - 50);
    console.log(position);
    $('#recordViewPopover').fadeToggle('fast');
    if ($('img[title*=\"Show\"]').hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $('img[title*=\"Show\"]').addClass('active');
    }
  });

问题是，我希望能够在单击第二个图像时显示另一个名为“objectViewPopover”的DIV。现在，当我点击第二张图片时，只会显示“recordViewPopover”。

我该如何解决这个问题？

更新：

这是一个更简单的场景，我只是浏览每个图像：

$('img[title*=\"Show\"]').each(function(index, value){
    if(index === 0){
        console.log('object');
        $(this).live('click', function(e) {

            console.log('OBJECT VIEW OPTION SELECTED!');

        });
    }
    else
        console.log('record');
  });

为什么点击不会绑定到第一个匹配？

Answer 1

在图像添加数据属性中，类似这样的

First Image: <img class="io-content-pane-header-button" data-divid="recordViewPopover"...> 

Second Image: <img class="io-content-pane-header-button" data-divid="objectViewPopover"...>

并更改

$('#recordViewPopover')

到

$('#' + $(this).data("divid"))

并更改

$('img[title*=\"Show\"]')

到

$(this)

代码。

Demo

Answer 2

如果DOM中图像的位置一致，您可以执行类似

的操作

if($(this).is(':last-child'))...

或者你可以给图像一个独特的类：

<a class="io-content-pane-header-button-right recordView" style="right: 41px;"><img class="io-content-pane-header-button" src="/some/src" title="Show Options"></a>

<a class="io-content-pane-header-button-right objectView" style="right: 41px;"><img class="io-content-pane-header-button" src="/some/other/src" title="Show Options"></a>

并做

if($(this).hasClass('objectView'))...

Answer 3

img1=$('img[title*=\"Show\"]')[0];
img2=$('img[title*=\"Show\"]')[1];
$(img1).live('click', function(e) {
    console.log('RECORD VIEW OPTION SELECTED!');
     e.stopImmediatePropagation();      
    var position = $(this).parent().offset(); 
    $('#recordViewPopover').css('top', (position.top + $(this).height()) - 50);
    console.log(position);
    $('#recordViewPopover').fadeToggle('fast');
    if ($(img1).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(img1).addClass('active');
    }
  });



  $(img2).live('click', function(e) {
    console.log('OBJECT VIEW OPTION SELECTED!');
     e.stopImmediatePropagation();      
    var position = $(this).parent().offset(); 
    $('objectViewPopover').css('top', (position.top + $(this).height()) - 50);
    console.log(position);
    $('objectViewPopover').fadeToggle('fast');
    if ($(img2).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(img2).addClass('active');
    }
  });

我对jQuery不太满意，但试试吧。

无法在jQuery中为2个图像设置click事件

3 个答案: