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

【问题标题】：how make a show and hide caption for the radio button with picture如何为带有图片的单选按钮制作显示和隐藏标题
【发布时间】：2014-08-07 12:34:59
【问题描述】：

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

这是带有图片的单选按钮的 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();
});

【问题讨论】：

你还没有说明你的问题是什么。
我建议您使用 json 获取所有详细信息。加载内容更容易。

标签： javascript jquery html

【解决方案1】：

这样的？

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

注意：我为元素添加了一个通用类以稍微缩短代码。

DEMO

【讨论】：

是的，这就是我希望它工作的方式。但是，我希望图像保留.. 我应该删除 $('img').hide(); ?我很抱歉我是 jquery 的新手.. 这就是为什么..
@florie 是的，删除它。