CODEWITHSUNDEEP
javascriptjqueryhtml
Mr.Happy
Mr.Happy

Reputation: 2647

jQuery issue with conditions

I have two anchor links One is Like and Second is Favorite Now I am trying get alert when user click to specific option.

If user click to Like option alert('Like Clicked');

or

If user click to Favorite option alert('Favorite Clicked');

but something is wrong and getting multiple alerts with Like and Favorite.

Whats wrong with my code I can't understated.

MY JS WORK:

$(window).load(function(){
    $('.ovrly a').click( function () {
        var getImageID = $(this).attr("id"); //class name with id

        if($(".like").children("."+getImageID)) {
            alert('Like Clicked');  
        }

        if($(".fav").children("."+getImageID)) {
            alert('Favourite Clicked'); 
        }
    });
});

MY HTML WORK:

<div class="ovrly">
    <span class="like">
        <a class="like_32" id="like_32" href="javascript:void(0);">Like</a>
        <p class="likeCount_32">
            15
        </p> 
    </span>

    <span class="fav">
        <a class="favourite_32" id="favourite_32" href="javascript:void(0);">Favourite</a>
        <p class="favouriteCount_32">
            09
        </p> 
    </span>
</div>

My Sample JS FIDDLE

My Sample Code With Ajax Code:

<script type="text/javascript">
    // like and favourite ajax script
    $(function () {
        $('.load_more_ctnt .ovrly a').live("click", function () {
            var getImageID = $(this).attr("id"); //class name with id
            var getID = getImageID.replace(/[^0-9]+/g, ""); //only id
            var getOptionName = getImageID.replace(/[^A-Za-z]+/g, ""); //only id
            //alert(getImageID);

            $(document).ajaxStart(function() {

                if($(".like").children("."+getImageID).length > 0) {
                    alert('Like Clicked');  
                }

                if($(".fav").children("."+getImageID).length > 0) {
                    alert('Favourite Clicked'); 
                }

            }).ajaxStop(function() {


               if($(".like").children("."+getImageID).length > 0) {
                    alert('Like Clicked');  
               }

               if($(".fav").children("."+getImageID).length > 0) {
                    alert('Favourite Clicked'); 
               }

            });

            if (getImageID) {
                $.ajax({
                    type: "POST",
                    url: "<?php echo URL; ?>home/passImageID",
                    data: "getImageID=" + getImageID,
                    success: function (html) {
                        $("#" + getImageID).removeAttr("id");

                        if(html == 'like'){
                            $("." + getImageID).addClass( "iplike" );
                            var incrementBy1 = $(".likeCount_" + getID).text();
                            var tempLikeNewValue = +incrementBy1+1;
                            $(".likeCount_" + getID).text("");
                            $(".likeCount_" + getID).text(tempLikeNewValue);

                        }else{

                            $("." + getImageID).addClass( "ipfav" );
                            var incrementBy1 = $(".favouriteCount_" + getID).text();
                            var tempFavNewValue = +incrementBy1+1;
                            $(".favouriteCount_" + getID).text("");
                            $(".favouriteCount_" + getID).text(tempFavNewValue);

                        }

                    }
                });
            } else {
                 //$(".more_tab").html('The End');
            }

            return false;
        });
    });
 </script>

Upvotes: 1

Views: 70

Answers (7)

uma
uma

Reputation: 2952

your approach is correct, but you have little bit diverted from basic concept.

$(".like").children("."+getImageID) and $(".fav").children("."+getImageID) both are returning object.

In case, when you click on like then 

$(".like").children("."+getImageID) return a object of array that have element.
$(".feb").children("."+getImageID) return a object of array that are empty.

but in both case there is object of array and for a object of array if condition is always true.

try to execute on js console :

if([]){
  console.log("it will print that condition is true")
}

then you alwaye find:

it will print that condition is true

You would have use for correct working.

if($(".like").children("."+getImageID).length>0){

}

and 

if($(".like").children("."+getImageID).length > 0){
}

Upvotes: 0

Brad Faircloth
Brad Faircloth

Reputation: 327

Another option... 

$('#favourite_32').click(function () {

    alert('Favorite Clicked');

});
$('#like_32').click(function () {

    alert('Like Clicked');

});

Upvotes: 0

Girish
Girish

Reputation: 12117

$(".like").children("."+getImageID) the code provide you children element selector object, for the exist check, you can use langth.

if($(".like").children("."+getImageID).length > 0) {
            alert('Like Clicked');  
        }

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

use length in jquery

if ($(".like").children("." + getImageID).length > 0) {
    alert('Like Clicked');
}

if ($(".fav").children("." + getImageID).length > 0) {
    alert('Favorite Clicked');
}

Fiddle

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

reference hasClass()

$('.ovrly').on('click','a',function () {

if ($(this).hasClass("like_32")) {
        alert('Like Clicked');
    }

    if ($(this).hasClass("favourite_32")) {
        alert('Favorite Clicked');
    }

});

DEMO

Upvotes: 1

adripanico
adripanico

Reputation: 1058

Your problem is that both conditions are always true!

$(".like").children("." + getImageID)

$(".fav").children("." + getImageID)

You are not comparing anything. Both statements return true since both elements exists in your page.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

I think you need .is().

Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

Code

$('.ovrly a').click(function () {
    if ($(this).is(".like_32")) {
        alert('Like Clicked');
    }

    if ($(this).is(".favourite_32")) {
        alert('Favorite Clicked');
    }
});

DEMO

Upvotes: 2

Related Questions