Question

我创建了一些jquery，显示然后根据下拉列表中的用户选择隐藏各种div。我最近发布了这个并且得到了非常友好的帮助，但其中一个下拉按预期工作并且图片被替换，另外两个图像出现在原稿旁边而不是替换它，如下图所示。

enter image description here

这是我正在使用的CSS，HTML和jQuery，谢谢！

CSS

.builder-page .form-container .recipe-settings {
    padding: 40px 10px;
}
.builder-page .form-container .recipe-settings div {
    display: block;
    float: left;
    text-align: left;;
}
.builder-page .form-container .recipe-settings div .box {

    margin: 0px auto;

}
.builder-page .form-container .recipe-settings div .Prepbox {

    margin: 0px auto;

}
.builder-page .form-container .recipe-settings div .Cookbox {

    margin: 0px auto;
}
.builder-page .form-container .recipe-settings div select {
    padding: 10px;
    margin-bottom: 40px;
    margin-top: 17px;
    margin-right:100px;
}
.builder-page .form-container .recipe-settings div label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

HTML

<div class="recipe-settings pure-u-1 clearfix">
                                    <div class="pure-u-1-3">
                                        <span class="heading">Portion number</span>
                                      <div id ="option1" class="box"> <img src="assets/images/icon-portions.png" alt="" /> </div>
                                      <div id="option2" class="box"><img src="assets/images/portionFour.jpg" alt="" /></div>
                                      <div id="option3" class="box"><img src="assets/images/portionEight.jpg" alt="" /></div>
                                      <div id="option4" class="box"><img src="assets/images/portionSixteen.jpg" alt="" /></div>
                                        <select id="select-portion" name="portion_num">
                                            <option value="option1">Two</option>
                                            <option value="option2">Four</option>
                                            <option value="option3">Eight</option>
                                        </select>
                                    </div>
                                    <div class="pure-u-1-3">
                                        <span class="heading">Preparation time</span>
                                        <div id ="option10" class="Prepbox"> <img src="assets/images/icon-clock.png" alt="" /> </div>
                                        <div id="option11" class="PrepBox"> <img src="assets/images/SixtyMins.jpg" alt="" /></div>
                                        <div id="option12" class="PrepBox"> <img src="assets/images/Ninty.jpg" alt="" /></div>
                                        <div id="option13" class="PrepBox"> <img src="assets/images/OneFifty.jpg" alt="" /></div>
                                        <select id="select-prep-time" name="prep_time">
                                            <option value="option10">Two</option>
                                            <option value="option11">Four</option>
                                            <option value="option12">Eight</option>
                                        </select>
                                        <label for="increase-preparation-time"><input type="checkbox" id="increase-preparation-time" name="prepAddTime" /> Increase according to portion number</label>
                                        <input type="text" id="addedPrepTime" name="addedPrepTime" value="" placeholder="Added Prep Time Per Person"  class="element pure-u-10" />
                                    </div>
                                    <div class="pure-u-1-3">
                                        <span class="heading">Cooking time</span>
                                       <div id ="cook1" class="Cookbox">  <img src="assets/images/icon-clock.png" alt="" /> </div>
                                       <div id="cook2" class="CookBox"> <img src="assets/images/SixtyMins.jpg" alt="" /></div>
                                       <div id="cook3" class="CookBox"> <img src="assets/images/Ninty.jpg" alt="" /></div>
                                        <select id="select-cook-time" name="cook_time">
                                            <option value="cook1">Two</option>
                                            <option value="cook2">Four</option>
                                            <option value="cook3">Eight</option>
                                        </select>
                                        <label for="increase-cooking-time"><input type="checkbox" id="increase-cooking-time" name="cookAddTime" /> Increase according to portion number</label>
                                        <input type="text" id="addedCookTime" name="addedCookTime" value="" placeholder="Extra cook time per extra person"  class="element pure-u-10" />
                                    </div>
                                </div>

的jQuery

 $(document).ready(function () {
    $('.box').hide();
    $('#option1').show();
    $('#select-portion').change(function () {
        $('.box').hide();
        $('#'+$(this).val()).show();
    });

});

$(document).ready(function () {
    $('.PrepBox').hide();
    $('#option10').show();
    $('#select-prep-time').change(function () {
        $('.PrepBox').hide();
        $('#'+$(this).val()).show();
    });

});

$(document).ready(function () {
    $('.CookBox').hide();
    $('#cook1').show();
    $('#select-cook-time').change(function () {
        $('.CookBox').hide();
        $('#'+$(this).val()).show();
    });
    });

Answer 1

这是因为你声明了两个不同的类（我在你的另一个帖子的答案中显示了这个）第一个在调用函数时永远不会被隐藏 -

<div id ="option10" class="Prepbox"> <img src="assets/images/icon-clock.png" alt="" /> </div>
<div id="option11" class="PrepBox"> <img src="assets/images/SixtyMins.jpg" alt="" /></div>

将第一个更改为class="PrepBox"，您的问题应该自行清理。

Answer 2

我注意到你有这些div元素，这些元素的类别与其他人不同：

<div id ="option10" class="Prepbox"> <img src="assets/images/icon-clock.png" alt="" /> </div>

和

<div id ="cook1" class="Cookbox">  <img src="assets/images/icon-clock.png" alt="" /> </div>

每当您将.PrepBox或.CookBox告诉hide()或show()时，上述元素（分别）都不会受到影响。

显示/隐藏div后，图像显示在原始图像旁边而不是替换它

2 个答案: