Question

我的代码目前允许在引文下点击的任何链接打开新页面。我试图排除“更多...”链接执行此功能，因为这些链接用于添加更多链接到当前页面。有没有办法做到这一点？

这是我的javascript

$(document).ready(function ($) {
  var url = 'https://www.sciencebase.gov/catalog/item/504216b6e4b04b508bfd333b?
format=jsonp&fields=relationships,title,body,contacts';
  $.ajax({
    type: 'GET',
    url: url,
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function (json) {
      var citeCount = 0;
      var piCount = 0;
      $('#project').append('<li><b><a href="' + url + '">' + json.title + '</a> - </b>' + json.body + '</li>');
      $('#project a').on('click', function (e) {
        e.preventDefault();
        if (citeCount == 1) {
          return;
        }
        $.ajax({
          type: 'GET',
          url: 'https://www.sciencebase.gov/catalog/itemLink    
/504216b6e4b04b508bfd333b?format=jsonp',
          jsonpCallback: 'getSBJSON',
          contentType: "application/json",
          dataType: 'jsonp',
          success: function (json) {
            // Loop function for each section (10 citations per section)
            var loopSection = function (start, stop) {
              // Http setup for all links
              var linkBase = "http://www.sciencebase.gov/catalog/item/";
              // Link for citation information
              var link = "";
              for (var j = start; j < stop; j++) {
                // Create a link using the realtedItemId
                link = linkBase + json[j].relatedItemId;
                // Title links                                 
                var $anchor = $("<a>", {
                  href: link,
                  id: "id" + j,
                  text: json[j].title
                });
                // .parent() will get the <li> that was just created and append to 
                //the first citation element
                $anchor.appendTo("<li>").parent().appendTo("#citations");
              }
            }
            var itemCount = json.length;
            var numSections = Math.floor((itemCount / 10));
            var moreLinks = $('<a href="" id="nextLink">More...</a>');
            var loopCount = 1;
            loopSection(0, 10);
            $('#citations').append(moreLinks);
            $(moreLinks).on('click', function (e) {
              e.preventDefault();
              if (numSections > 1) {
                loopSection((loopCount * 10), ((loopCount + 1) * 10));
                $('#citations').append(moreLinks);
                numSections -= 1;
                loopCount++;
              } else if (numSections <= 1) {
                $("#nextLink").closest('a').remove();
                loopSection((loopCount * 10), json.length);
              }
            });
          },
          error: function (e) {
            console.log(e.message);
          }
        }); // END Second .ajax call
        $('#project').on('click', function (e) {
          e.preventDefault();
          if (piCount == 1) {
            return;
          }
          for (var i = 1; i < json.contacts.length; i++) {
            $('#piHeading').append('<ul>' + "Name: " + json.contacts[i].name + ', ' + "Email: " + json.contacts[i].email + ', ' + "Phone: " + json.contacts[i].phone + '</ul>');
          }
          piCount++;
        });
        citeCount++;
      }); // END Project link click event
      $('#citations').on('click', function (e) {
        e.preventDefault();
        window.open('CitationsInfo.html', '_self');
      });
    },
    error: function (e) {
      console.log(e.message);
    }
  }); // END First .ajax call              
}); // END Doc.ready

这是我的HTML，

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="MainPage4.js"></script>
<script src="Citations.js"></script>
</head>
<body>

<h2>Project</h2>

<div class='wrapper'>
<ul id='project'></ul>
</div>

<h3>Citations</h3>

<div class='wrapper'>  
<ul id='citations'></ul>   
</div>

<h3>Principal Investigators</h3>

<div class='wrapper'>    
<ul id='piHeading'></ul>
</div>

</body>
</html>

感谢您的帮助

Answer 1

如果您更改处理#citations容器的全局点击事件的代码部分，以包含用于过滤目标为#nextLink的点击的逻辑，那么它应该执行您想要的操作

$('#citations').on('click', function (e) {
    e.preventDefault();
    if (!$(e.target).is($('#nextLink'))) {
        window.open('CitationsInfo.html', '_self');
    }
});

完全删除上述部分也允许“更多...”链接正常工作，同时仍保持各个链接的功能。引用点击事件掩盖了其他行为。

jsfiddle

我怎样才能获得彼此独立行动的链接？

1 个答案: