Question

基本上，当您选择图像时，所有其他图像都变为0.4不透明度，但是我单击的图像保持不变。

这是我当前的代码

这只是示例中的图像之一，它们都是相同的，唯一的区别是，它不是网球包裹类，而是田径包裹（每个包裹的包裹名不同，包裹内的其他类别是相同）。 ``

   <div class="tennis-wrap map-markers-wrap">
        <div id="draggable1" class="location-imgs tennis ui-widget-content">
            <img src="<?php echo get_template_directory_uri();?>/lib/img/tennis.png" alt=""> 

            <div class="location-list">
                <h3>Sports and Wellbeing</h3>
                <ol>
                    <li><span>Willow Urban Retreat & Day Spa</span></li>
                    <li><span>Harold Holt Swim Centre</span></li>
                    <li><span>St James Valley Cricket Club</span></li>
                    <li><span>East Malvern Junior Football Club</span></li>
                    <li><span>East Malvern Tennis Club</span></li>
                    <li><span>Cabrini Health</span></li>
                </ol>
            </div>

            <div class="cross">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
                <path id="ic_add_24px" d="M19,13H13v6H11V13H5V11h6V5h2v6h6Z" transform="translate(-5 -5)"/>
                </svg>
            </div>
        </div>   
        <div class="location-pins">
            <div class="tennis-one location-number orange">1</div>
            <div class="tennis-two location-number orange">2</div>
            <div class="tennis-three location-number orange">3</div>
            <div class="tennis-four location-number orange">4</div>
            <div class="tennis-five location-number orange">5</div>
            <div class="tennis-six location-number orange">6</div>
        </div>
    </div>

``

 $(".map-markers-wrap").each(function () {
    var _this = $(this);

    _this.find(".cross").click(function () {
      var _this_cross = $(this);
      $(".location-list").hide();
      $(".location-pins").hide();

      $('img').not(this).stop().animate({
        opacity: 0.4
      }, 300);
      $(this).stop().animate({
        opacity: 1.0
      }, 300);

      setTimeout(function () {
        _this_cross.closest('.map-markers-wrap').find(".location-pins").show();
        _this_cross.closest('.map-markers-wrap').find(".location-list").show();

      }, 100)
    });
  });

据我所知，这段代码应该检查image是否不在此div中，然后它将不透明度更改为0.4，但它还将我单击的图像更改为0.4（当应为1.0时）也许我对这个关键字有个误解？任何帮助，将不胜感激。

Answer 1

$(this)是div之一，例如<div class="tennis-wrap map-markers-wrap">，因此您对$(this).stop().animate(...)的呼叫将选择<div>，而不是单击的<img>中所需的<div>。

尝试：

// Select all <img> tags not in this div:
$('.map-markers-wrap').not(_this).find('img').stop().animate({
  opacity: 0.4
}, 300);

// Select <img> tag in this div:
$(_this).find('img').stop().animate({
  opacity: 1.0
}, 300);

_this的每个.map-markers-wrap格。

更改未选择图像的不透明度，但保持选择图像可见

1 个答案: