jquery - 如何更改 css 不显示或单击按钮阻止

Question

显示属性更改时单击按钮。

例子，button class = "1"点击结果 - first-img class display: block,第二个img类显示:无，第三个img类显示:无。

button class = "2"点击结果-first-img class display: none,第二个 img 类显示: block ，第三个 img 类显示:无。

button class = "3"点击结果-first-img class display: none,第二个img类显示:无，第三个img类显示: block 。

codepen = http://codepen.io/soso77/pen/bwkYZX

ol,
ul,
li {
  list-style: none;
}
.slider {
  float: left;
  position: relative;
  width: 980px;
}
img.first-img,
img.second-img,
img.third-img {
  max-height: 625px;
  display: block;
}
img.second-img,
img.third-img {
  display: none;
}

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>

Answer 1

使用 attribute class 获取类号，并使用 nth-child() 选择图像。这是我的简短回答:

   $('button').click( function (){
        var number = $(this).attr('class');
        $('ul li img').css('display', 'none');
      $('ul li img:nth-child('+number+')').css('display', 'block');
    })

有关问题要求，请参阅下面的代码段:

$(document).ready(function(){

var X = jQuery.noConflict();

var realSlider= X("ul#bxslider").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);

      }

    });

    var realThumbSlider=X("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 235,
      slideMargin: 9,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*X("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */

      }
    });

    linkRealSliders(realSlider,realThumbSlider);

    if(X("#bxslider-pager li").length<4){
      X("#bxslider-pager .bx-next").hide();
    }

// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){

  X("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=X(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}

//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){

  var $thumbS=X("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");

  if(slider.getSlideCount()-newIndex>=3)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-3);

}

 
});
   $('button').click( function (){
        var number = $(this).attr('class');
        $('ul li img').css('display', 'none');
      $('ul li img:nth-child('+number+')').css('display', 'block');
    })

ol, ul, li {
    list-style: none;
}

.slider {float: left;position: relative;width: 980px;}

img.first-img,img.second-img,img.third-img {
    max-height: 625px;
    display: block;
}

img.second-img,img.third-img {
    display: none;
}

.ori-image-button {position: absolute !important;top:0;left:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ori-image-button">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <div class="ori-image-button">
  
  
<button class="1">Class 1 </button>
<button class="2">Class 2 </button>
<button class="3">Class 3 </button>
</div>

-    <ul id="bxslider">
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
    </ul>

<ul id="bxslider-pager">
  <li data-slideIndex="1"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-1st" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="2"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-2st" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="3"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-3rd" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="4"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-4th" alt="thumb-img" width="235" height="150"></a>
</ul>