Question

我正在尝试将这两个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属性和第二行图像的第一次点击，然后将它们组合起来，然后将结果打印到控制台。

Answer 1

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/

Answer 2

$(".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如果有帮助的话。

Answer 3

您可以使用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/

Answer 4

这是一种自包含的东西。一个jquery单击事件，用于测试目标元素以确定它是在第一行还是第二行。如果尚未设置，则设置它。一旦警报，就会点击两行。

这是一个小提琴。 FIDDLE EXAMPLE

(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 = "";
        }
    });

})();

将2个jQuery函数组合成1并保持点击顺序

4 个答案: