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

how make a show and hide caption for the radio button with picture

本文关键字：显示 设置 隐藏 标题 单选按钮 有图片      更新时间：2023-09-26

我的设计是带图片的单选按钮。我想放一个显示和隐藏的描述效果。一旦单选按钮被点击，一定的描述应该显示，如果另一个单选按钮被点击，以前的描述应该隐藏，然后显示当前按钮的描述。

这是我的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();
});

像这样?

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

注意:我在元素中添加了一个公共类来缩短代码。

相关文章：