JavaScript切换无法正常工作

Question

Can anyone explain why the snippet of code below does not actually cause the "#wrapper" to shift? It's driving me insane...Nothing happens when I click on the info icon.

<div class="panel panel-primary"> 
        <div class="panel-heading">{{item.entree}}</div>
        <div id="wrapper">
            <i class="fa fa-info-circle fa-2x info myButton"></i>
            <img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
            <p class="menu_desc price-widget">{{item.description}}</p>
        </div>    
        <div class="panel-body">{{item.side}}</div>
        <div class="center" style="width: 85%; margin-bottom: 7px;">
            <div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
                  <span class="input-group-btn">
                        <span class="input-group-btn">
                            <button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
                                <i class="fa fa-minus fa-2x"></i>
                            </button>
                        </span>
                    </span>
                    <input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
                    <span class="input-group-btn">
                        <button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
                            <i class="fa fa-plus fa-2x"></i>
                        </button>
                    </span>
                </div>
            </div>
    </div>
<script>
$(".myButton").click(function () {
    // Set the effect type
    var effect = 'slide';
    // Set the options for the effect type chosen
    var options = { direction: "right" };
    // Set the duration (default: 400 milliseconds)
    var duration = 500;
    $('#wrapper').toggle(effect, options, duration);
});
</script>

Answer 1

You forgot to add a class in button

<button class="myButton">

 $(".myButton").click(function() { console.log("123") // Set the effect type var effect = 'slide'; // Set the options for the effect type chosen var options = { direction: "right" }; // Set the duration (default: 400 milliseconds) var duration = 500; $('#wrapper').toggle(effect, options, duration); $('#wrapper').hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-primary"> <div class="panel-heading">{{item.entree}}</div> <div id="wrapper"> hide <i class="fa fa-info-circle fa-2x info myButton"></i> <img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}"> <p class="menu_desc price-widget">{{item.description}}</p> </div> <div class="panel-body">{{item.side}}</div> <div class="center" style="width: 85%; margin-bottom: 7px;"> <div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4"> <span class="input-group-btn"> <span class="input-group-btn"> <button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'> <i class="fa fa-minus fa-2x"></i> </button> </span> </span> <input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}"> <span class="input-group-btn"> <button class="myButton" type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'> test<i class="fa fa-plus fa-2x"></i> </button> </span> </div> </div> </div> 

You can see the front end of knowledge: https://github.com/AutumnsWind

Answer 2

Have a look at the snippet below.

I included jQuery and jQueryUI, resized the i-tag and included the text "Image", so you can click on it. Seems to be working!

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <div class="panel panel-primary"> <div class="panel-heading">{{item.entree}}</div> <div id="wrapper"> <i class="fa fa-info-circle fa-2x info myButton" style="width:20px; height:20px">Image</i> <img class="img-responsive myButton" src="/media/{{item.primary_image}}" alt="{{item.entree}}"> <p class="menu_desc price-widget">{{item.description}}</p> </div> <div class="panel-body">{{item.side}}</div> <div class="center" style="width: 85%; margin-bottom: 7px;"> <div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4"> <span class="input-group-btn"> <span class="input-group-btn"> <button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'> <i class="fa fa-minus fa-2x"></i> </button> </span> </span> <input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}"> <span class="input-group-btn"> <button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'> <i class="fa fa-plus fa-2x"></i> </button> </span> </div> </div> </div> <script> $(".myButton").click(function () { // Set the effect type var effect = 'slide'; // Set the options for the effect type chosen var options = { direction: "right" }; // Set the duration (default: 400 milliseconds) var duration = 500; $('.center').toggle(effect, options, duration); }); </script>