jQuery：将文档单击功能转换为嵌入式onclick功能？

Question

由于某些情况，我必须将click函数转换为单独的函数，并使用内联onClick="myFunction();"调用该函数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%');

}

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

提前致谢。

这是我的简化代码：

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

 <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> 

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%'});

}

这是一个片段：

 //ex Btns//// function exFunction(element) { var ex = $(element).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(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> 

Answer 3

以每个人的答案和更新您的jsfiddle你onClick当应onclick ，你必须通过this作为参数，以便您传递元素点击这里这种方式是你的jsfiddle更新和Louys的codepen做工不错

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

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