在其他条件下显示选定的属性值

Question

下面我正在浏览色板列表，并将标题属性分配给变量，然后在Swatch下方显示此值。

在MouseLeave上，如果父母选择了类I类返回false，以便仍显示标题属性值。但是，如果我从shatatch中鼠标鼠标，而父母没有选择类，则标题属性值变为空，如代码中所示。

我如何修改以便在MouseLeave上，如果父母没有选择类，则使用来自父级的"选择"类的标题属性值？

？

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

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

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>