0

私のコードでは現在、引用の下でクリックされたリンクで新しいページを開くことができます。現在のページにリンクを追加するために使用されるため、この機能の実行から「詳細...」リンクを除外しようとしています。これを行う方法はありますか？

これがjsfiddleです

これが私の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>

助けてくれてありがとう

4

1 に答える 1

0

コンテナのグローバルクリックイベントを処理するコードの部分を変更して#citations、ターゲットがであるクリックを除外するロジックを含めると、#nextLink必要な処理が実行されます。

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

上記のセクションを完全に削除すると、個々のリンクの機能を維持しながら、[詳細...]リンクが正しく機能するようになります。引用クリックイベントは、他の動作をマスクしています。

jsfiddle

于 2013-02-11T21:22:35.823 に答える