Question

由于某些情况，我必须将我的点击功能转换为单独的函数，并使用内联onClick="myFunction();"

调用该函数

我目前的代码是这样的：

$(document).on('click','.exBtn', function(){
var ex = $(this).attr('data-ex');
$('.btnsHolderEx').hide();
$('.subbtnsHolder').show();

$('.pageDivEx').addClass('width', '100%');

});

我试过了，但这不对：

 function myFunction(e) {

    var ex = e.attr('data-ex');
    $('.btnsHolderEx').hide();
    $('.subbtnsHolder').show();

    $('.pageDivEx').addClass('width', '100%');

}

有人可以就此提出建议吗？

提前致谢。

这是我的简化代码：

＆＃13;

//ex Btns////
function exFunction(e) {
    var ex = e.attr('data-ex');
	
	alert(ex);

 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="exBtn" onClick="exFunction" data-ex="test 1">
  test 1
</div>

<div class="exBtn" onClick="exFunction();" data-ex="test 2">
  test 2
</div>


<div class="exBtn" onClick="exFunction" data-ex="test 3">
  test 3
</div>

＆＃13;

Answer 1

您的e与$(this)不同。试试这个：

 function myFunction(e) {
    var ex = $(e.target).attr('data-ex');
    $('.btnsHolderEx').hide();
    $('.subbtnsHolder').show();
    $('.pageDivEx').addClass('width', '100%');
 }

此外，当您创建onclick事件时，请确保添加event参数内联：

<div class="exBtn" onClick="exFunction(event)" data-ex="test 1">
  test 1
</div>

最后，如果您要访问data属性，请在jQuery中使用data关键字。

这是一个简短的例子：

exFunction = function(e) {
    var ex = $(e.target).data('ex');
    alert(ex);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="exBtn" onClick="exFunction(event)" data-ex="test 1">
  test 1
</div>

<div class="exBtn" onClick="exFunction(event)" data-ex="test 2">
  test 2
</div>


<div class="exBtn" onClick="exFunction(event)" data-ex="test 3">
  test 3
</div>

Answer 2

您必须从内联调用传递元素。

onClick="myFunction(this);"

然后使用它来使用jQuery查找元素，方法是用$()包装它。

function myFunction(element) {

  //var ex = $(element).attr('data-ex');  // this will get the attribute's value as onload

  // An alternative:
  var ex = $(element).data('ex');  // This will get the current attribute's value even if it changed after page load

  $('.btnsHolderEx').hide();
  $('.subbtnsHolder').show();

  //$('.pageDivEx').addClass('width', '100%');  // ?? That's wrong.

  // You probably wish to do this instead:
  $('.pageDivEx').css({'width':'100%'});

}

这是一个片段：

＆＃13;

//ex Btns////
function exFunction(element) {
  var ex = $(element).data('ex');

  alert(ex);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="exBtn" onclick="exFunction(this);" data-ex="test 1">
  test 1
</div>

<div class="exBtn" onclick="exFunction(this);" data-ex="test 2">
  test 2
</div>

<div class="exBtn" onclick="exFunction(this);" data-ex="test 3">
  test 3
</div>

＆＃13;

Answer 3

获取每个人的答案并更新你的jsfiddle 你应该onClick时onclick，你必须传递this作为参数，这样你传递点击这里的元素的方式就是你的jsfiddle更新了，而且代码在路易斯工作得很好

https://codepen.io/Bes7weB/pen/wpBYMQ

https://jsfiddle.net/obuh9bfk/2/

jQuery：将单击函数上的文档转换为内联onclick函数？

3 个答案: