Question

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

我试图在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>

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>

Answer 2

尝试使用其他类代替ID。 id只能用于一个元素。

$(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函数。这符合您的需求吗？

Answer 3

我有同样的问题，只需更改我们调用的函数名即可解决问题。

从不同按钮调用JS / jQuery函数时出现问题

3 个答案: