Question

我有以下html

<a id='quoteLinks' class='quoteLinksClass'>
  <span data-action='viewQuote'>
    <i data-action='viewQuote' data-quoteid ="2" class="fa fa-eye"></i>
  </span>

  <span data-action='editQuote'>
    <i data-action='editQuote' data-quoteid ="3" class="fa fa-eye"></i>
  </span>
</a>

如果用户点击锚标记的span部分，我想相应地执行不同的操作。喜欢 - 如上所述'编辑报价'或'查看报价'

我有以下jQuery代码段：

$('.quoteLinksClass').on('click',function(event){
  event.stopPropagation();
  if(event.target.nodeName == 'SPAN' || event.target.nodeName == 'I'){
    var quoteId = $(this).data('quoteid');
    var action  = $(this).data('action');
    console.log($(this)); // Here it prints the <a> object, but I 
                            // need   <span> or <i> based on the click
    if(action == 'viewQuote') {
      window.location.href="view page";
    } else if(action == 'editQuote') {
      window.location.href="edit page";
    }
  }
});

Answer 1

您可以使用event.target和.closest()来查找已点击的实际span，然后访问与以下相关联的data-*属性

<a id='quoteLinks' class='quoteLinksClass'>
    <span data-action='viewQuote' data-quoteid ="2">
        <i  class="fa fa-eye"></i>
    </span>

    <span data-action='editQuote' data-quoteid ="3">
        <i  class="fa fa-eye"></i>
    </span>
</a>

然后

$('.quoteLinksClass').on('click', function (event) {
    event.stopPropagation();

    var $span = $(event.target).closest('span');
    var quoteId = $span.data('quoteid');
    var action = $span.data('action');
    if (action == 'viewQuote') {
        window.location.href = "view page";
    } else if (action == 'editQuote') {
        window.location.href = "edit page";
    }
});

演示：Fiddle

Answer 2

$('.quoteLinksClass').on('click','span,i',function(event){
    event.stopPropagation();

     var quoteId = $(this).data('quoteid');
     if(quoteId.length ==0 ) {
       quoteId = $(this).find('i').data('quoteid');
     }

      var action  = $(this).data('action');
      if(action == 'viewQuote'){
        window.location.href="view page";
      }
      else if(action == 'editQuote'){
        window.location.href="edit page";
      }
  });

Answer 3

看看$（这个） this =＆gt; event.target

$('.quoteLinksClass').on('click',function(event){
  event.stopPropagation();
  if(event.target.nodeName == 'SPAN' || event.target.nodeName == 'I'){
    var quoteId = $(event.target).data('quoteid');
    var action  = $(event.target).data('action');
    console.log($(this)); // Here it prints the <a> object, but I 
                                // need   <span> or <i> based on the click
    if(action == 'viewQuote') {
      window.location.href="view page";
    } else if(action == 'editQuote') {
      window.location.href="edit page";
    }
  }
});

Answer 4

您可以在click上添加span个活动并查看action。

$('.quoteLinksClass').on('click', 'span', function (event) {
  var action = $(this).data('action');
  if (action === 'viewQuote') {

  } else if (action === 'editQuote') {

  }
});

这将使关注点分离。

Answer 5

$('.quoteLinksClass > span').on('click', function(e) {
  e.preventDefault();
  var that = $(this);
  var action = that.attr('data-action');
  if (action == 'viewQuote') {
    alert('viewQuote');
  } else if (action == 'editQuote') {
    alert('editQuote');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id='quoteLinks' class='quoteLinksClass'>
  <span data-action='viewQuote'>
    <i data-action='viewQuote' data-quoteid ="2" class="fa fa-eye"></i>View
  </span>

  <span data-action='editQuote'>
    <i data-action='editQuote' data-quoteid ="3" class="fa fa-eye"></i>Edit
  </span>
</a>

Answer 6

我只想制作两个链接。目前，您的JavaScript非常了解您的HTML结构。因为你在每个span元素上都有quote-id，所以只做：

<span data-action='viewQuote' data-quoteid ="2">
    <i  class="fa fa-eye"></i>
</span>

<span data-action='editQuote' data-quoteid ="3">
    <i  class="fa fa-eye"></i>
</span>

然后在你的JS中：

$('*[data-action="viewQuote"]').on('click', function() {
     var quoteId = $(this).data('quoteid');
     window.location.href="viewQuote?quoteId="+quoteId;
}

$('*[data-action="editQuote"]').on('click', function() {
     var quoteId = $(this).data('quoteid');
     window.location.href="editQuote?quoteId="+quoteId;
}

这样，您的代码不需要了解有关HTML布局的任何信息，只需了解您的数据属性即可。你还节省了一些ifs和elses：D。

Answer 7

请试试这个：

$(document).ready(function() {
  $('.quoteLinksClass span i').on('click',function(event){
    event.stopPropagation();
    if(event.target.nodeName == 'SPAN' || event.target.nodeName == 'I'){
      var quoteId = $(this).data('quoteid')
      var action  = $(this).data('data-action');
      console.log($(this)); // Here it prints the <a> object, but I 
                              // need   <span> or <i> based on the click
      if(action == 'viewQuote') {
        window.location.href="view page";
      } else if(action == 'editQuote') {
        window.location.href="edit page";
      }
    }
  });
});

<a id='quoteLinks' class='quoteLinksClass' href="#">
  <span data-action='viewQuote'>
    <i data-action='viewQuote' data-quoteid ="2" class="fa fa-eye"></i>
  </span>

  <span data-action='editQuote'>
    <i data-action='editQuote' data-quoteid ="3" class="fa fa-eye"></i>
  </span>
</a>

使用jQuery访问Anchor标记的Child元素

7 个答案: