CODEWITHSUNDEEP
javascriptjqueryhtml
NicoM
NicoM

Reputation: 619

Combing 2 jQuery functions into 1 and keeping click order

I am trying to combine these two jQuery functions below and be able to add the ID attribute for the first click on the first row of images and the first click on the second row of images.

Here is jQuery code:

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

And here is my HTML code:

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

Like I mentioned above, I just need it to keep track of the ID attributes of the first click of first row and 1st click of 2nd row of images and combining them and then printing the result to the console.

Upvotes: 1

Views: 253

Answers (4)

James
James

Reputation: 1572

This is somewhate self contained. One jquery click event that tests the targeted element to determine if it was in the first or second row. If not set yet, it sets it. Once both rows have been clicked once it alerts.

Here is a fiddle. 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 = "";
        }
    });

})();

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101614

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

Combining things is nice, if it makes sense to. here, I just bind them separately then (based on if the first row has been clicked) gather the second Id and proceed.

Demo with an added visual queue: http://jsfiddle.net/wpCus/

Upvotes: 2

Pieter
Pieter

Reputation: 1833

You can use the index() function of 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');

});

Demo: http://jsfiddle.net/DNFgr/

Upvotes: 0

Vinay
Vinay

Reputation: 6322

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

Use on, then use off on the element so it won't call the same callback. Or extrapolate the function and use one. To be honest, I don't completely understand your question though. Lmk if this helped.

Upvotes: 0

Related Questions