页面加载和脚本工作错误时不显示内容

时间：2018-08-16 11:59:15

标签： javascript jquery twitter-bootstrap

我遇到了以下问题：我有一个简单的选择器，用户可以在其中选择选择器的选项。此操作将触发我的脚本，并向用户显示内容，具体取决于所选的选项。问题是，首先，我在页面加载时看到了所有隐藏的内容（附有屏幕快照）。其次，由于某种原因，pr-btn（添加到购物车）的内容开始完全显示。我究竟做错了什么？我绝对不喜欢javascript，所以我将非常感谢您的帮助。

enter image description here 

jQuery(function () {
  jQuery('.pr-price').hide();
  jQuery('.d2').show();
  jQuery('#select').on("change",function () {
    jQuery('.pr-price').hide();
    jQuery('.d'+jQuery(this).val()).show();
  }).val("2");
  jQuery('#select').on("change",function () {
    jQuery('.pr-btn').hide();
    jQuery('.b'+jQuery(this).val()).show();
  }).val("2");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="tabbable full-width-tabs">
    <ul class="nav nav-tabs">
        <li class="w-100">
        <a href="#tab1default" data-toggle="tab">
        Subscribers</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1default">
            <div class="col-md-6">
                <span class="service__details">Details</span>
                <select id="select" name="cd-dropdown" class="cd-select">
                    <option value="1">50 YouTube Subscribers</option>
                    <option value="2">100 YouTube Subscribers</option>
                    <option value="3">300 YouTube Subscribers</option>
                    <option value="4" selected>500 YouTube Subscribers</option>
                    <option value="5">1000 YouTube Subscribers</option>
                    <option value="6">2000 YouTube Subscribers</option>
                    <option value="7">5000 YouTube Subscribers</option>
                </select>
            </div>
            <div class="col-md-3">
            <span class="service__details">Price $</span>
                <div class="pr-price d1">$15</div>
                <div class="pr-price d2">$20</div>
                <div class="pr-price d3">$30</div>
                <div class="pr-price d4">$45</div>
                <div class="pr-price d5">$80</div>
                <div class="pr-price d6">$150</div>
                <div class="pr-price d7">$300</div>
                <div class="pr-price d8">$550</div>
            </div>
            <div class="col-md-3">
                <a href="123" class="pr-btn b1">Add to cart</a>
                <a href="456" class="pr-btn b2">Add to cart</a>
                <a href="789" class="pr-btn b3">Add to cart</a>
                <a href="111" class="pr-btn b4">Add to cart</a>
                <a href="123" class="pr-btn b5">Add to cart</a>
                <a href="123" class="pr-btn b6">Add to cart</a>
                <a href="123" class="pr-btn b7">Add to cart</a>
                <a href="123" class="pr-btn b8">Add to cart</a>
            </div>
        </div> 
    </div> 
</div> <!-- /tabbable -->

1 个答案:

答案 0 :(得分：1)

您可以使用css（style =“ display：none”）在JS加载之前在开始时隐藏所有元素。然后，您对select change的回调将显示适当的元素。看下面的例子。 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
    jQuery(
        function () {
            jQuery('#select').on("change",function () {
                jQuery('.pr-price').hide();
                jQuery('.d'+jQuery(this).val()).show();
            });
            jQuery('#select').on("change",function () {
                jQuery('.pr-btn').hide();
                jQuery('.b'+jQuery(this).val()).show();
            });
        }
    );
</script>

<div class="tabbable full-width-tabs">
    <ul class="nav nav-tabs">
        <li class="w-100">
            <a href="#tab1default" data-toggle="tab">
                Subscribers</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1default">
            <div class="col-md-6">
                <span class="service__details">Details</span>
                <select id="select" name="cd-dropdown" class="cd-select">
                    <option value="1">50 YouTube Subscribers</option>
                    <option value="2">100 YouTube Subscribers</option>
                    <option value="3">300 YouTube Subscribers</option>
                    <option value="4">500 YouTube Subscribers</option>
                    <option value="5">1000 YouTube Subscribers</option>
                    <option value="6">2000 YouTube Subscribers</option>
                    <option value="7">5000 YouTube Subscribers</option>
                </select>
            </div>
            <div class="col-md-3">
                <span class="service__details">Price $</span>
                <div style="display:none" class="pr-price d1">$15</div>
                <div style="display:none" class="pr-price d2">$20</div>
                <div style="display:none" class="pr-price d3">$30</div>
                <div style="display:none" class="pr-price d4">$45</div>
                <div style="display:none" class="pr-price d5">$80</div>
                <div style="display:none" class="pr-price d6">$150</div>
                <div style="display:none" class="pr-price d7">$300</div>
                <div style="display:none" class="pr-price d8">$550</div>
            </div>
            <div class="col-md-3">
                <a style="display:none" href="123" class="pr-btn b1">Add to cart</a>
                <a style="display:none" href="456" class="pr-btn b2">Add to cart</a>
                <a style="display:none" href="789" class="pr-btn b3">Add to cart</a>
                <a style="display:none" href="111" class="pr-btn b4">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b5">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b6">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b7">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b8">Add to cart</a>
            </div>
        </div>
    </div>
</div> <!-- /tabbable -->
相关问题
最新问题