使用jQuery中的.click函数将HTML按钮指向不同的配置文件
使用jQuery中的.click函数将HTML按钮指向不同的配置文件
提问于 2016-02-19 00:15:47
我在我的投资组合网站上有四个按钮。一个指向linkedin，一个指向code wars，一个指向github，还有一个指向免费代码阵营。我已经包含了下面这四个按钮的html和jQuery。使用此代码后，只有指向代码wars的按钮有效，其他三个按钮根本不会打开任何窗口，我不知道为什么。
<button type= button class="btn-block btn-social btn-github">
<i class="fa fa-github-square"></i> GitHub</button>
<button type=button class="btn-block btn-social btn-linkedin">
<i class="fa fa-linkedin-square"></i> LinkedIn</button>
<button type=button class="btn-block btn-social btn-codewars">Code Wars</button>
<button type=button class="btn-block btn-social btn-freecodecamp">
Free Code Camp</button>
$('.btn-codewars').click(function(){
window.location = 'http://www.codewars.com/users/jwianniello' + this.id;
});
$('.btn-github').click(function(){
window.location = 'http://github.com/jwianniello' + this.id;
});
$('.btn-linkedin').click(function(){
window.location = 'http://www.linkedin.com/in/joe-ianniello-78338690?trk=nav_responsive_tab_profile' + this.id;
});
$('.btn-freecodecamp').click(function(){ window.location = 'http://www.freecodecamp.com/jwianniello'+ this.id;
});回答 2
Stack Overflow用户
发布于 2016-02-19 00:27:41
你的代码不能工作是因为你在type= button周围有html错误，其次是因为this.id不存在。它应该是type="button"，并且您必须在每个<button>上添加id属性。
下面的代码可以工作...
注释：只需记住取消注释下面的注释代码，并删除我添加的用于测试目的的console.log(...)。
注意2：第一个指向codewar的链接起作用了，因为你的用户名在最后：http://www.codewars.com/users/jwianniello
<button type="button" id="githubUserName" class="btn-block btn-social btn-github">
<i class="fa fa-github-square"></i> GitHub
</button>
<button type="button" id="linkedinUserName" class="btn-block btn-social btn-linkedin">
<i class="fa fa-linkedin-square"></i> LinkedIn
</button>
<button type="button" id="codewarsUserName" class="btn-block btn-social btn-codewars">Code Wars</button>
<button type="button" id="freecodeCampUserName" class="btn-block btn-social btn-freecodecamp">
Free Code Camp</button>
<script>
$('.btn-codewars').click(function() {
console.log("codewars ", this.id);
//window.location = 'http://www.codewars.com/users/jwianniello' + this.id;
});
$('.btn-github').click(function() {
console.log("github ", this.id);
//window.location = 'http://github.com/jwianniello' + this.id;
});
$('.btn-linkedin').click(function() {
console.log("linkedin ", this.id);
//window.location = 'http://www.linkedin.com/in/joe-ianniello-78338690?trk=nav_responsive_tab_profile' + this.id;
});
$('.btn-freecodecamp').click(function() {
console.log("freecodecamp ", this.id);
//window.location = 'http://www.freecodecamp.com/jwianniello' + this.id;
});
</script>Stack Overflow用户
发布于 2016-02-19 04:06:13
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
table tr td {
border:dotted 2px red;
}
.selectedSeat {
color:blue;
}
</style>
<script>
$(document).ready(function () {
$('.btn-codewars').click(function () {
window.location = 'http://www.codewars.com/users/jwianniello' + this.id;
});
$('.btn-github').click(function () {
window.location = 'http://github.com/jwianniello' + this.id;
});
$('.btn-linkedin').click(function () {
window.location = 'http://www.linkedin.com/in/joe-ianniello-78338690?trk=nav_responsive_tab_profile' + this.id;
});
$('.btn-freecodecamp').click(function () {
window.location = 'http://www.freecodecamp.com/jwianniello' + this.id;
});
});
</script>
</head>
<body style="width:50%;">
<button type= button class="btn-block btn-social btn-github">
<i class="fa fa-github-square"></i> GitHub</button>
<button type=button class="btn-block btn-social btn-linkedin">
<i class="fa fa-linkedin-square"></i> LinkedIn</button>
<button type=button class="btn-block btn-social btn-codewars">Code Wars</button>
<button type=button class="btn-block btn-social btn-freecodecamp">
Free Code Camp</button>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35495055
复制相关文章
相似问题
腾讯云开发者
