如何才能使链接彼此独立
How do can I get links to act independent of each other?
我的代码目前允许在引文下单击任何链接来打开新页面。我试图将"更多…"链接排除在执行此功能之外,因为这些链接用于向当前页面添加更多链接。有办法做到这一点吗?
这是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>
感谢的帮助
如果您将代码中处理#citations
容器的全局单击事件的部分更改为包含逻辑以过滤目标为#nextLink
的单击,那么它应该可以执行您想要的操作。
$('#citations').on('click', function (e) {
e.preventDefault();
if (!$(e.target).is($('#nextLink'))) {
window.open('CitationsInfo.html', '_self');
}
});
完全删除上面的部分也可以让"更多…"链接正常工作,同时仍然保持单个链接的功能。引用点击事件掩盖了其他行为。
jsfiddle
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 如何使用jQuery自动打开页面上的所有链接
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- jquery动画可以通过编程链接吗
- 在单击href链接的同时下载文件
- 尽管链接成功并已成功下载,但未找到NPM模块
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 单击页面上的链接后高度发生变化
- 将纯文本URL转换为可单击链接
- python-selenium-点击上升链接
- 一点javascript元编程&可链接的设置器
- ng视图外的链接重定向到ng视图内的页面
- 如何将独立测试链接附加到一个链接中
- 如何在单击两个独立链接时打开两个独立的弹出窗口
- 如何设置class="活动"到两个独立的基于滚动的链接
- 独立的web应用链接脚本-阻止它附加具有特定类的链接
- 如何确保两个独立的javascript对象的属性被链接
- 如何才能使链接彼此独立
- 如何使DataTable行及其列具有两个独立的onclick链接事件