Question

我自己完成了本教程，但我使用的是jQuery和Bootstrap，而不是我认为作者使用的jQuery mobile？无论如何，我无法让它发挥作用。

当用户点击Btn1时，我希望panel1消失。单击Btn2会导致panel2消失，依此类推。有人可以帮助我解决我出错的地方吗？谢谢。

HTML

<div class="container">
  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary" myPanel="panel1">Btn 1</button>

<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary" myPanel="panel2">Btn 2</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success" myPanel="panel3">Btn 3</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info" myPanel="panel4">Btn 4</button>

</div>

<div class="container">
    <div class="row">
        <div class="col-xs-3" id="panel1">
            first panel
        </div>
        <div class="col-xs-3" id="panel2">
            second panel
        </div>
        <div class="col-xs-3" id="panel3">
            third panel
        </div>
        <div class="col-xs-3" id="panel4">
            fourth panel
        </div>
    </div> <!--/.row-->
</div> <!--/.container-->

JS

$(document).ready(function(){
    $(".btn").click(function(){
        var panelID = $(this).attr('myPanel');
        $('#' + panelId).toggle();
    });
});

Answer 1

您使用var panelID作为变量名称错误panelId。

$(".btn").click(function(){
    var panelID = $(this).attr('myPanel');
    $('#' + panelID).toggle();
});

$(document).ready(function(){
    $(".btn").click(function(){
        var panelID = $(this).attr('myPanel');
        $('#' + panelID).toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary" myPanel="panel1">Btn 1</button>

<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary" myPanel="panel2">Btn 2</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success" myPanel="panel3">Btn 3</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info" myPanel="panel4">Btn 4</button>

</div>

<div class="container">
    <div class="row">
        <div class="col-xs-3" id="panel1">
            first panel
        </div>
        <div class="col-xs-3" id="panel2">
            second panel
        </div>
        <div class="col-xs-3" id="panel3">
            third panel
        </div>
        <div class="col-xs-3" id="panel4">
            fourth panel
        </div>
    </div> <!--/.row-->
</div> <!--/.container-->

Answer 2

<html>
    <head>
    <title></title>  
    <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
        $( document ).ready(function() {
          // Handler for .ready() called.
            $( ".btn" ).each(function(index) { 
                $(this).on("click", function(){
                     var panelID = $(this).attr('data-panel'); 
                    $('#'+panelID).hide();
                });
            });
        }); 
        </script>
    </head>
    <body>
        <div class="container">
            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
            <button type="button" class="btn btn-primary" data-panel="panel1" onclick="click();">Btn 1</button> 
            <!-- Secondary, outline button -->
            <button type="button" class="btn btn-secondary" data-panel="panel2">Btn 2</button> 
            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success" data-panel="panel3">Btn 3</button> 
            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info" data-panel="panel4">Btn 4</button> 
        </div> 
            <div class="container">
                <div class="row">
                    <div class="col-xs-3" id="panel1">  first panel  </div>
                    <div class="col-xs-3" id="panel2">  second panel </div>
                    <div class="col-xs-3" id="panel3">   third panel </div>
                    <div class="col-xs-3" id="panel4">   fourth panel </div>
                </div> <!--/.row-->
            </div> <!--/.container-->
    </body>
</html>

请尝试此代码

单击按钮试图让面板消失

2 个答案: