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

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();
});

注意：我在元素中添加了一个通用类，以缩短代码。

DEMO