JavaScript切换不正常工作

Question

有谁可以解释为什么下面的代码片段实际上不会导致“#wrapper”转移？它让我疯狂......当我点击信息图标时没有任何反应。

<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

您忘了在按钮中添加课程

<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>

您可以看到知识的前端：https://github.com/AutumnsWind

Answer 2

查看下面的代码段。

我包含了jQuery和jQueryUI，调整了i-tag的大小并包含了文本＆＃34; Image＆＃34;，所以你可以点击它。似乎工作！

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;