从不同按钮调用JS/jQuery函数的问题
从不同按钮调用JS/jQuery函数的问题
提问于 2018-09-19 07:05:14
所以我不确定我是否做错了什么，但是为什么我不能对每个呼叫使用第二个按键(基于按键if )？
我试图在google上搜索运行函数调用的多个实例，但没有找到相关的结果。
我计划在我正在构建的页面上经常使用这个按钮，大约有10个实例。
$(function(){
$('#consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
document.getElementById("consoleLog2").addEventListener("click", function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" id="consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default" id="consoleLog" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default" id="consoleLog2" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default" id="consoleLog2" type="button" data-href="This is another test, again.">Console Log v2.2</button>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-19 07:16:05
不要在多个元素中使用相同的id。Id应该是唯一的属性。将其作为类使用，并实现该类的事件侦听器。
$(function(){
$('.consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
$('.consoleLog2').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default consoleLog" id="consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default consoleLog" id="consoleLog1" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default consoleLog2" id="consoleLog2" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default consoleLog2" id="consoleLog3" type="button" data-href="This is another test, again.">Console Log v2.2</button>
Stack Overflow用户
发布于 2018-09-19 07:17:04
尝试使用其他类而不是ids。Ids用于一个元素。
$(function(){
$('.consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is another test, again.">Console Log v2.2</button>我也不明白为什么你有两个consoleLog函数。这个适合你的需要吗？
Stack Overflow用户
发布于 2019-06-10 20:53:53
我只需更改我们调用的函数名就解决了这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52395719
复制相关文章
相似问题