Question

我想创建一个执行此操作的jQuery代码：

如果类'slide1', 'slide2' or 'slide3'的元素也有类"on"，则查找类'slide-1', 'slide-2' or 'slide-3'的元素，将其不透明度更改为1，并将其他元素的不透明度更改为{{ 1}}。

注意：元素'slide1'与'slide-1'等配对。因此，如果'slide1'的课程为“on”，则'slide-1'应具有opacity设置为1，'slide-2'和'slide-3'的不透明度应设置为0.

元素'slide1，...'是幻灯片显示的单选按钮：

HTML：

jQuery的：

<div class="slider-radio-buttons">
  <div class="on slide1"></div>
  <div class="off slide2"></div>
  <div class="off slide3"></div>
</div>

http://jsfiddle.net/UyKzf/5/

重要事项：单选按钮效果很好，我只需要将它们与幻灯片中的幻灯片（幻灯片1，...）配对，并设置已打开的幻灯片的不透明度1。

Answer 1

你可以在jquery中使用.hasClass（“foo”）而不是（“.classname”）函数

Answer 2

var buttons = $(".slider-radio-buttons div"),
    slides  = $('[class^="slide-"]');

buttons.on('click', function () {
    buttons.not(this).removeClass('on').addClass('off');
    $(this).addClass('on').removeClass('off');

    var n = this.className.replace('on','').trim().slice(-1);

    var slide = slides.filter(function() {
        return this.className.slice(-1) == n;
    });

    slides.not(slide).hide();
    slide.show();
});

FIDDLE

Answer 3

这是另一种方式，如果您想尝试... LINK

HTML ...

<div class="slider-radio-buttons">
  <div id="slide-1" class="on"></div>
  <div id="slide-2" class="off"></div>
  <div id="slide-3" class="off"></div>
</div>

<div class="slides">
    <div class="slide-1">Slide-1</div>
    <div class="slide-2">Slide-2</div>
    <div class="slide-3">Slide-3</div>
</div>

... JQuery的

$(".slider-radio-buttons").on('click', '.off', function() {
        $(".on").removeClass('on').toggleClass('off');
        $(this).toggleClass('on').removeClass('off');
    $("div[class^='slide-']").css('display','none');

    $('.'+this.id).css('display','block');
    });

Answer 4

如果我能理解你的答案，解决方案就是：

http://jsfiddle.net/UyKzf/30/

<div class="slider-radio-buttons">
   <div class="off"></div>
   <div class="off"></div>
   <div class="off"></div>
</div>

$(".slider-radio-buttons div").first().addClass('on');

$(".slider-radio-buttons div").on('click', function() {
    if(!$(this).hasClass('on'))
    {
       $('.on').removeClass('on');
       $(this).addClass('on');
    }
 });

Answer 5

我的解决方案使用按下的单选按钮的索引位置来选择合适的滑块

HTML

<div class="slider-radio-buttons">
  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
</div>

<div class="slide-1">slide 1</div>
<div class="slide-2">slide 2</div>
<div class="slide-3">slide 3</div>

JS

   var radios = $(".slider-radio-buttons div");

   function setActive(i) {
         radios.removeClass("on").addClass("off").
         eq(i).addClass("on").removeClass("off");

         $("[class^=slide-]").hide().eq(i).show();
   }

  setActive(0);
  radios.on('click',function() { setActive($(this).index()) });

example

如何在jQuery中创建这个条件？

5 个答案: