将2个jQuery函数组合为1，并保持单击顺序

Combing 2 jQuery functions into 1 and keeping click order

本文关键字：单击 顺序 jQuery 2个 函数 组合      更新时间：2023-09-26

我试图将下面的这两个jQuery函数结合起来，并能够为第一行图像的第一次单击和第二行图像的首次单击添加ID属性。

这里是jQuery代码：

$(".first-row, .second-row").on("click", "img", function() {
    //want ID1 to be for the first click of first row of images
   ID1 = $(this).attr('id');
    //want ID2 to be for the first click of the second row of images 
    ID2 = $(this).attr('id');
    console.log(ID + " " + ID2);
});
// desired outcome "individual yes" or "family maybe" ect ect

这是我的HTML代码：

<html>
<head>
<meta name="description" content="example of selection order" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <title></title>
</head>
<body>
    <div class="all-images">
        <div class="first-row">
            <div class="first-id">
                <img src="image1.jpg" alt="Individual" id="individual">
            </div>
            <div class="second-em">
                <img src="image2.jpg" alt="employer" id="employeer">
            </div>
            <div class="third-fa">
                <img src="image3.jpg" alt="fam" id="family">
            </div>
        </div>
        <div class="second-row">
            <div class="yes-first">
                <img src="image4.jpg" alt="yes" id="yes">
            </div>
            <div class="no-second">
                <img src="image5.jpg" alt="no" id="yes">
            </div>
            <div class="maybe-third">
                <img src="image6.jpg" alt="maybe" id="maybe">
            </div>
        </div>
    </div>
</body>
</html>

就像我上面提到的，我只需要它来跟踪第一行和第二行图像的第一次点击的ID属性，并将它们组合起来，然后将结果打印到控制台。

var ID1, ID2;
$('.first-row img').click(function(e){
  ID1 = this.id;
});
$('.second-row img').click(function(e){
  if (!ID1) return;
  ID2 = this.id;
  // we have ID1 & ID2 populated--do something
  console.log(ID1 + ' ' + ID2);
  // last step: reset
  ID1 = ID2 = null;
});

如果有意义的话，组合东西是很好的。在这里，我只是将它们单独绑定，然后（根据第一行是否被点击）收集第二个Id并继续。

添加了可视化队列的演示：http://jsfiddle.net/wpCus/

$(".first-row, .second-row").on("click", "img", function() {
    var $row = $(this).parent().parent();
    if ($row.hasClass('first-row')) {
        ID1 = $(this).attr('id');
    } else {
        ID2 = $(this).attr('id');
    }
    $row.off('click');
    console.log(ID + " " + ID2);
});

对元素使用on，然后使用off，这样它就不会调用相同的回调。或者外推函数并使用one。老实说，我还不完全理解你的问题。Lmk如果这有帮助的话。

您可以使用jQuery的index()函数：

$(".first-row, .second-row").on("click", "img", function () { //or one()
    var number = $(this).parents('div').index();
    $('.first-row div').eq(number).css('background', 'red');
    $('.second-row div').eq(number).css('background', 'blue');
});

演示：http://jsfiddle.net/DNFgr/

这是一些自我包含的东西。一个jquery点击事件，用于测试目标元素，以确定它是在第一行还是第二行。如果还没有设置，它会设置它。一旦两行都被单击，它就会发出警报。

这是一把小提琴。小提琴示例

(function(){ 
    var id1 = "";
    var id2 = "";
    $('body').on('click','div.all-images img',function(e){
        var me = $(this);
        if($(e.target).is('div.first-row img')){
            id1 = me.attr('id');
        }else if($(e.target).is('div.second-row img')){
            id2 = me.attr('id');
        }
        //Once one from each row is clicked it alerts
        if(id1 !== "" && id2 !== ""){
            alert(id1 + " " + id2);
            id1 = "";
            id2 = "";
        }
    });
})();
相关文章：