Question

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

例如， button class =“1”点击结果 - 第一个img类显示：block，第二个img类显示：none，第三个img类display：none。

button class =“2”点击结果 - 第一个img类显示：无，第二个img类显示：block，第三个img类display：none。

button class =“3”点击结果 - 第一个img类显示：无，第二个img类显示：none，第三个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>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button data-notation="true" class="1">Class 1 </button>
<button data-notation="true" class="2">Class 2 </button>
<button data-notation="true" class="3">Class 3 </button>



 <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-3rd" class="third-img" />
        </li>
    </ul>

在js部分：

$(".button[data-notation=true]").on("click",function(){
    var index = parseInt($(this).attr("class"));
    $("ul#list > li > img").hide();
    $("ul#list > li > img").eq(index-1).show()
})

Answer 3

我已将样本发布到codepen中，请使用此选项进行检查。

[view on codepen][1]


  [1]: http://codepen.io/satheeshmallow/pen/xEBpEr

Worked Example

Answer 4

我通过添加类和删除类

来满足您的要求

它会帮助你实现一些目标，

<强> HTML：

<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>
<button id="showImage1">
Show Image 1
</button>
<button id="showImage2">
Show Image 2
</button>
<button id="showImage3">
Show Image 3
</button>
<button id="showAll">
Show All
</button>

<强> CSS：

img {
    width: 10px;
    height: 10px;
}
.display-none{
  display:none;
}
.display-inline{
  display:inline;
}

<强> JS：

$（“body”）。on（'click'，'＃showImage1'，function（）{debugger; $（ “第一-IMG。”）addClass（ '显示内联'）removeClass（ '显示无'）。; $（ “第二-IMG，。第三-IMG。”）addClass（ '显示无'）removeClass（ '显示内联'）。; }）;

$("body").on('click','#showImage2', function(){debugger;
$(".second-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.third-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showImage3', function(){debugger;
$(".third-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.second-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showAll', function(){
$(".first-img,.second-img,.third-img").addClass('display-inline').removeClass('display-none');
});

FIDDLE

Answer 5

如果您喜欢，请告诉我：

JS（使用JQuery）/ CSS / HTML

$("button").click(function(){
	$(".first-img").removeClass("selected");
  $(".second-img").removeClass("selected");
  $(".third-img").removeClass("selected");
  $("." + $(this).attr("data-item-class")).addClass("selected");
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-item-class="first-img">Class 1 </button>
<button data-item-class="second-img">Class 2 </button>
<button data-item-class="third-img">Class 3 </button>

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <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 selected" />
        <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 selected" />
        <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 selected" />
        <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>

如果你更喜欢它，可以小提琴https://jsfiddle.net/fart52wL/1/

此外，如果您不喜欢使用ID，则可以使用选择器类。

[编辑]更新剪辑和小提琴

如何通过按钮单击

5 个答案: