javascript - 从不同按钮调用 JS/jQuery 函数的问题

Question

所以我不确定我是否做错了什么，但为什么我不能为每个呼叫使用第二个按钮（基于按钮 ID）？

我试图在谷歌上搜索运行多个函数调用实例，但没有出现任何相关信息。

我计划在我正在构建的页面上大量使用此按钮，大约 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>

标签： javascriptjquery

Answer 1

不要在多个元素中使用相同的 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>