javascript - 如何为带有图片的单选按钮制作显示和隐藏标题

Question

我的设计是一个带有图片的单选按钮。我想添加显示和隐藏描述效果。单击单选按钮后，应显示某个描述，如果单击另一个单选按钮，则应隐藏先前的描述，然后显示当前按钮的描述。

这是我的带有图片的单选按钮的 html 代码:

` 我们的成分...

<div class="slider">
<!-- Lamb Kebab Pizza -->
<input type="radio" name="slide_switch" value="kebab" id="id1" checked="checked"/>
    <label for="id1">
    <img src="../img/kebab.jpg" width="100" alt="Lamb Kebab Pizza" class="img img-responsive" />
    </label>
<img src="../img/kebab.jpg" class="img img-responsive" />


<!-- Fennel Sausage Pizza -->
<input type="radio" name="slide_switch" value="fennel" id="id2" />
<label for="id2">
<img src="../img/fennel_copy.jpg" width="100" alt="Fennel Sausage Pizza" class="img img-responsive" />
</label>
<img src="../img/fennel_copy.jpg" class="img img-responsive" />


<!-- Pistachio and Sausage Pizza -->
<input type="radio" name="slide_switch" value="pistachio" id="id3" />
<label for="id3">
<img src="../img/pistachio.jpg" width="100" alt="Pistachio and Sausage Pizza" class="img img-responsive" />
</label>
<img src="../img/pistachio.jpg" class="img img-responsive" />


<!-- White Truffle Pizza -->
<input type="radio" name="slide_switch" value="white" id="id4" />
<label for="id4">
<img src="../img/white_truffle.jpg" width="100" alt="White Truffle Pizza" class="img img-responsive" />
</label>
<img src="../img/white_truffle.jpg" class="img img-responsive" />


<!-- Surly Pizza -->
<input type="radio" name="slide_switch" value="surly" id="id5" />
<label for="id5">
<img src="../img/surly_pizza.jpg" width="100" alt="Surly Pizza" class="img img-responsive" />
</label>
<img src="../img/surly_pizza.jpg" class="img img-responsive" />

</div>

<!-- Lamb Kebab Pizza -->
<div class="kebab">Kebab</div>

<!-- Fennel Sausage Pizza -->
<div class="fennel">Fennel</div>

<!-- Pistachio and Sausage Pizza -->
<div class="pistachio">Pistachio</div>

<!-- White Truffle Pizza -->
<div class="white">White</div>

<!-- Surly Pizza -->
<div class="surly">Surly</div>

`

我的 JavaScript 代码是:

$(document).ready(function(){
    $("input[name$='slide_switch']").click(function() {
    var value = $(this).val();

    if (value == 'fennel') {
      $(".fennel").show();
      $(".kebab",".pistachio",".white",".surly").hide();
    }
    else if (value == 'pistachio') {
      $(".pistachio").show();
      $(".kebab",".fennel",".pistachio",".surly").hide();
    }
    else if (value == 'white') {
      $(".white").show();
      $(".kebab",".fennel",".pistachio",".surly").hide();
    }
    else if (value == 'surly') {
      $(".surly").show();
      $(".kebab",".fennel",".pistachio","white").hide();
    }
    });
    $(".kebab").show();
    $(".fennel",".pistachio",".white",".surly").hide();
});

Answer 1

有这样的事吗？

$("input[name='slide_switch']").click(function () {
    $('img').hide();
    $('[src*="'+this.value+'"]').show();
    $('.common').hide();
    $('.' + this.value).show();
});

注意:我向元素添加了一个公共(public)类，以稍微缩短代码。

DEMO