Display selected attribute value in else condition

Question

Below I am looking through a list of swatches and assigning the title attribute to variable and then displaying this value below the swatch.

On mouseleave if the parent has selected class I return false so that the title attribute value is still shown. However if I mouseleave from swatch where parent does not have selected class the title attribute value becomes empty as shown in the code.

How do I modify so that on mouseleave if parent does not have selected class, it uses the title attribute value from the parent selected class?

$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){ 
    $(this).mouseenter(function(){
        var swatchColor = $(this);
        var swatchTitle = swatchColor.attr('title');
        var swatchTitleInsert = swatchColor.closest('.carousel').next();
        swatchTitleInsert.html(swatchTitle);

        $(this).mouseleave(function(){
            if($(this).parent().hasClass('selected')){
                return false;
            } else {
                //I want to display title attr value from parent selected//
                swatchTitleInsert.html(''); 
            }
        });     
    });
});

span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}

Seyed Morteza Hosseini · Accepted Answer

I think this is your answer:

$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){
  var swatchColor = $(this);
  var swatchTitle = swatchColor.attr('title');
  var swatchTitleInsert = swatchColor.closest('.carousel').next(); 
  $(this).mouseenter(function(){
    swatchTitleInsert.html(swatchTitle);   
    $(this).mouseleave(function(){
      if($(this).parent().hasClass('selected')){
        return false;
      } else {
        var swatchTitle = $(this).closest('.producttile_swatches').find('.swatches ul li a.selected span.swatch_color').attr('title');
        swatchTitleInsert.html(swatchTitle); 
      }
    });     
  });
});

span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}

Display selected attribute value in else condition

Answers (1)

Related Questions