Question

我现在正在寻找很多时间，这是一种非常简单有效的方法来点击javascript（而不是jQuery）中的按钮功能。

我遇到的问题是：1。有时dom尚未创建，javascript函数中有未定义的变量。 2.我无法以正确的方式将属性传递给此函数。

所以从根本上说，我有这些：

<div class="container">
    <button type=button class="click">Click</button>

    <div class="smallContainer">
        <img src="source.com" class="myimage">
        <div class="data"> some data</div>
    </div>
</div>

<div class="container">
    <button type=button class="click">Click</button>

    <div class="smallContainer">
        <img src="source.com" class="myimage">
        <div class="data"> other data</div>
    </div>
</div>


<div class="container">
    <button type=button class="click">Click</button>

    <div class="smallContainer">
        <img src="source.com" class="myimage">
        <div class="data"> usefull data</div>
    </div>
</div>


for (){ assign in each button the onclick function}

function onclick(){
        here i want to change the opacity of the image by the class "myimage",
        take the innerHTML of the div by the class "data" and do something to it(maybe i ll send an ajax request in this function also)
    }

所以我需要一个for循环或其他东西（可能在javascript文件中），这将对所有按钮赋予此功能。每当我点击按钮时，我都需要知道哪个按钮是什么，以及“数据”类里面的div是什么。

我尝试了很多方法，每个方面都有问题。任何人都可以帮助一个简单的工作解决方案吗？

谢谢

Answer 1

既然你提到你在普通的JavaScript中没有这么简单的技能，那么现在是时候将jQuery添加到你的工具箱了。

以下是您需要的所有代码

 $function() { // when the page is ready
   $(".click").on("click", function(e) { // assign a function to ALL class="click" 
     var id = this.id; // or $(this).attr("id"); - if you need the button's ID
     var divContent = $(this).parents().find(".data").html()
     $.get("someserver.php",{"id":id,"parm":divContent},function(data) {
       alert(data);//  from server
     });
   });
 });

Answer 2

尝试使用jquery库:)，你可以使用

这样的代码

<script>
$(".data").click(function(){
  var class_value = $(this).html();
})
</script>

如您所见，该函数将应用于具有“数据”类的所有元素

分配功能onclick的简单方法 - javascript

2 个答案: