hasClass jQuery总是给出" false"

时间:2016-03-15 12:46:00

标签: javascript jquery html5

Updated DEMO Link

我有2个div,点击每个div我正在添加课程"任务活动"分别:一旦点击第一个div,正在添加类,然后再次点击另一个div。我正在搜索父div并删除类并添加到当前单击的元素(就像单选按钮一样)。

问题:每当我尝试检查if($(this).parent('').hasClass)时,它总会返回false

HTML : 
<div class="full-page-width">


<div class="doctor-wrap clrfix">
            <div class="doctor-left">
                <div class="doc-img">
                    <img src="http://i.istockimg.com/image-zoom/84647033/3/380/339/stock-photo-84647033-young-woman-lying-in-the-grass.jpg" alt="doctor select"></div>
                <span class="doctor-txt">Tự chọn  bác sĩ yêu thích</span>
            </div>
            <div class="doctor-right">
                <div class="doc-img">
                    <img src="http://i.istockimg.com/image-zoom/84647033/3/380/339/stock-photo-84647033-young-woman-lying-in-the-grass.jpg" alt="doctor select"></div>
                <span class="doctor-txt">Giúp chọn <br> bác sĩ phù hợp nhất</span>
            </div>
        </div>
    </div>



Image Courtsey : http://www.istockphoto.com/


JS : 

        /*--- Doctor List Filter Starts ---*/
        $('#search-criteria').keyup(function () {
            var searchStr = $(this).val().toUpperCase();

            $(".doctor-profile").each(function () {
                var isMatch = $(this).text().toUpperCase().indexOf(searchStr) > -1;
                $(this)[isMatch ? "show" : "hide"]();

            });
        });
        /*--- Doctor List Filter Ends ---*/


        /*--- Mission Page Starts ---*/

        console.log('hello');

        // Hide all divs on load 
        $('.select-doctor').hide();


        var step1, step2, step2prev, step2next, step3, step4, step5;

        step1       = ".btn-1 img, #edit-submit--2";
        step2prev   = ".doctor-left-btn img";
        step2next   = ".doctor-right-btn img";
        chooseDoctor= ".doctor-left .doc-img";
        randomDoctor= ".doctor-right .doc-img";



        $(step1).on('click', function(){
            $('#fw_content').find('.pane-vietnam-enfa-plus-vietnam-doctor-list-form, .btn-1').fadeOut( "fast" );
            $('#fw_content').find('.select-doctor').fadeIn( "fast" );
        });

        $(step2prev).on('click', function(){
            $('#fw_content').find('.pane-vietnam-enfa-plus-vietnam-doctor-list-form, .btn-1').fadeIn( "fast" );
            $('#fw_content').find('.select-doctor').fadeOut( "fast" );
        });

        $(step2next).on('click', function(){
            $('#fw_content').find('.doctor-wrap, .doctor-btn-wrap').fadeOut( "fast" );
            $('#fw_content').find('#flexslider-1, .pane-vietnam-enfa-plus-vietnam-enfa-plus-form').fadeIn( "fast" );            
        });

        $(chooseDoctor).on('click', function(){
            if($(this).parent('.doctor-wrap .doctor-left .doc-img').hasClass('mission-active')){
                $(this).removeClass('mission-active');  
                alert('true 1');
            }
            else {
                $(this).addClass('mission-active'); 
            }
            /* else if($(this).parent('.doctor-wrap').find('.doctor-right .doc-img').hasClass('mission-active')){
                alert('true 1.1 right');
            } */
        })
        $(randomDoctor).on('click', function(){

            if($(this).parent('.doctor-wrap').find('.doctor-left .doc-img').hasClass('mission-active')){
                $(this).addClass('mission-active');
                alert('RIght Click true 1');
            }
            else if($(this).parent('.doctor-wrap').find('.doctor-right .doc-img').hasClass('mission-active')){
                alert('RIght Click  true 1.1 right');
            }
        })

        /*--- Mission Page Ends ---*/

1 个答案:

答案 0 :(得分:1)

问题是.parent(“。doctor-wrap”)

你必须做.parent s (“。doctor-wrap”)

但是,你可以这样做:

https://jsfiddle.net/bcnppybm/2/

$('.doc-img').click(function() {
    $('.doc-img').each(function(){$(this).removeClass('mission-active');});
    if (!$(this).hasClass('mission-active')) {
    $(this).addClass('mission-active');
  }
})