在else条件下显示所选属性值

Question

下面我将查看样本列表并将title属性分配给变量，然后在样本下方显示此值。

在mouseleave上，如果父级选择了类，则返回false，以便仍显示title属性值。但是，如果我从swatch鼠标移动，其中父级没有选定的类，则title属性值变为空，如代码所示。

如何修改，以便在mouseleave上如果父级没有选定的类，它会使用父选定类的title属性值？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
  <div class="swatches">
    <ul>
      <li class="product_swatch_list_item">
        <a href="#" class="selected">
          <span class="swatch_color" title="red"></span>
        </a>
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="white"></span>
        </a>   
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="blue"></span>
        </a>   
      </li>
   </ul>
 </div>
</div>
<div class="swatch-title-insert"></div>

<div class="carousel producttile_swatches">
  <div class="swatches">
    <ul>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="red"></span>
        </a>
      </li>
      <li class="product_swatch_list_item">
        <a href="#" class="selected">
          <span class="swatch_color" title="white"></span>
        </a>   
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="blue"></span>
        </a>   
      </li>
   </ul>
 </div>
</div>
<div class="swatch-title-insert"></div>

<div class="carousel producttile_swatches">
  <div class="swatches">
    <ul>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="red"></span>
        </a>
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="white"></span>
        </a>   
      </li>
      <li class="product_swatch_list_item">
        <a href="#" class="selected">
          <span class="swatch_color" title="blue"></span>
        </a>   
      </li>
   </ul>
 </div>
</div>
<div class="swatch-title-insert"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为这是你的答案：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
  <div class="swatches">
    <ul>
      <li class="product_swatch_list_item">
        <a href="#" class="selected">
          <span class="swatch_color" title="red"></span>
        </a>
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="white"></span>
        </a>   
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="blue"></span>
        </a>   
      </li>
   </ul>
 </div>
</div>
<div class="swatch-title-insert"></div>

<div class="carousel producttile_swatches">
  <div class="swatches">
    <ul>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="red"></span>
        </a>
      </li>
      <li class="product_swatch_list_item">
        <a href="#" class="selected">
          <span class="swatch_color" title="white"></span>
        </a>   
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="blue"></span>
        </a>   
      </li>
   </ul>
 </div>
</div>
<div class="swatch-title-insert"></div>

<div class="carousel producttile_swatches">
  <div class="swatches">
    <ul>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="red"></span>
        </a>
      </li>
      <li class="product_swatch_list_item">
        <a href="#">
          <span class="swatch_color" title="white"></span>
        </a>   
      </li>
      <li class="product_swatch_list_item">
        <a href="#" class="selected">
          <span class="swatch_color" title="blue"></span>
        </a>   
      </li>
   </ul>
 </div>
</div>
<div class="swatch-title-insert"></div>