1

我正在尝试组合下面的这两个 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 属性并将它们组合起来，然后将结果打印到控制台。

4

4 回答 4

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

于 2013-07-26T19:12:25.483 回答
0

您可以使用index()jQuery的功能：

$(".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/

于 2013-07-26T19:15:38.320 回答
0

这有点自给自足。一个 jquery click 事件，用于测试目标元素以确定它是在第一行还是第二行。如果尚未设置，则设置它。一旦两行都被点击，一旦它发出警报。

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

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

})();
于 2013-07-26T19:31:41.380 回答
0 
$(".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 如果这有帮助。

于 2013-07-26T19:12:44.113 回答