Question

当我加载页面时，我希望我的一些div从开始时隐藏起来，只显示一个，所以这是我为此找到的脚本。

<script>
    $(document).ready(function () {
        $(".total").click(function () {
            $("#piechart").removeClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".squat").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").removeClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".benchpress").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").removeClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".deadlift").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").removeClass('hidden');
        });
    });
</script>

这些是div

<div id="piechart" class="repPieChart"></div>                
<div id="piechartS" class="repPieChart hidden"></div>
<div id="piechartB" class="repPieChart hidden"></div>
<div id="piechartD" class="repPieChart hidden"></div>

CSS

.hidden {
    display: none;
}
.repPieChart {
    width: 100%;
    height: 500px;
    border-bottom: 5px solid #898989;
}

所以我的想法是第一个div从一开始就没有hidden类，所以它是可见的而其他的是隐藏的，然后当我点击链接到这个点击事件的标签时，它将删除或添加正确div的隐藏类，它做了，我检查了chrome代码检查器的东西，类被删除并添加了正确的方法，但只有第一个div是可见的，当我点击显示另一个我得到错误标题。

可能出现什么问题？

@{
Layout = "~/_SiteLayout.cshtml";
// Browser tab title.
Page.Title = "Repetitions";
// Opens connection to the database.
var db = Database.Open("SmallBakery");
// Gets the text typed into the textboxes and stores it in these variables.
var inputDate = Request.Form["inputDate"];
var endDate = Request.Form["endDate"];

var normOrAvg = Request.Form["NormOrAvg"];
// If no start date is selected, this will be used as the start date aka `inputDate`.
DateTime noStartDate = new DateTime(2000, 01, 01);
// If no end date is selected, this will be used as the end date.
DateTime noEndDate = DateTime.Now;

// If user does not choose eiter/any start/end date
// this will end up showing all results from `noStartDate` to todays date.
if (inputDate == "")
{
    inputDate = noStartDate.ToString("MMM d, yyyy");
}
if (endDate == "")
{
    endDate = noEndDate.ToString("MMM d, yyyy");
}
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        $(function () {

            // Get Date from datepicker
            var date = $(".datepicker").datepicker({ dateFormat: "M d, yy", showButtonPanel: true }).val

            // Use the date to create a Moment Object and format it so that it can be
            // used within the databse
            var databaseDate = moment(date).format('YY-MM-DD');

            // Use your correctly formatted date however you want, in this example
            // we are just console logging it to take a look if it's correctly parsed.
            console.log(databaseDate);

        });



    </script>
    <script>
        $(document).ready(function () {
            $('.holdLiftMenu li a').on('click', function () {
                $('li a.current').removeClass('current');
                $(this).addClass('current');
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            var elems = ['#piechart', '#piechartS', '#piechartB', '#piechartD']
            function show(item) {
                for (var i = 0; i < elems.length; i++) {
                    if (elems[i] === item) {
                        $(elems[i]).show();
                    } else {
                        $(elems[i]).hide()
                    }
                }
            }
            $(".total").click(function () {

                show("#piechart");
            });
            $(".squat").click(function () {
                show("#piechartS");
            });
            $(".benchpress").click(function () {
                show("#piechartB");
            });
            $(".deadlift").click(function () {

                show('');
            });
        });
    </script>
    <title></title>
</head>
<body>
    @{ 
        // DateTime variable for the startdate textbox placeholder.
        DateTime placeholderStartDate = Convert.ToDateTime(noStartDate);

        <h1 class="metricsTitle"><a href="~/metrics/">Repetitions in Intensity</a></h1>
        <p class="blackColor">Analyze in what range of intensity you accumulate most of your repetitions.</p>

        // Form with date textboxes and submit button.
        <form method="post" action="~/AJAXcalls/repinintAJAX.cshtml" name="form">
            <div class="reportDateDiv">

                <a class="blackColor fSize18 RPtxt">Reporting Period</a>

                <input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
                      onchange="mySubmit(this.form)" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />

                <a class="blackColor fSize16 RPtxtTo">to</a>

                <input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
                      onchange="mySubmit(this.form)" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />

                <select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)">
                    <option selected=@(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option>
                    <option selected=@(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option>
                </select>
                </div>
        </form>

        <div class="holdLiftMenu">
            <ul class="holdLiftMenuUL">
                <li class="holdLiftMenuLI"><a class="holdLiftMenuA total current">Total</a></li>
                <li class="holdLiftMenuLI"><a class="holdLiftMenuA squat">Squat</a></li>
                <li class="holdLiftMenuLI"><a class="holdLiftMenuA benchpress">Benchpress</a></li>
                <li class="holdLiftMenuLI"><a class="holdLiftMenuA deadlift">Deadlift</a></li>
            </ul>
        </div>

        // This div is updated with the data that is recieved from the background with the ajax information.
        <div id="here"></div>

        // Ajax script.
        <script type="text/javascript">
            function mySubmit(theForm) {
                $.ajax({ // create an AJAX call...
                    data: $(theForm).serialize(), // get the form data
                    type: $(theForm).attr('method'), // GET or POST
                    url: $(theForm).attr('action'), // the file to call
                    success: function (response) { // on success..
                        $('#here').html(response); // update the DIV
                    }

                });
            }
        </script>
    }
</body>

Answer 1

我制作fiddle，期待它有效：

    $(document).ready(function () {
    var elems = ['#piechart', '#piechartS', '#piechartB', '#piechartD'];
show('');
    function show(item) {
        for(var i =0; i<elems.length;i++){
        if(elems[i]===item){
            $(elems[i]).show();
        }else{
        $(elems[i]).hide()
        }
      }
    }
            $(".total").click(function () {

                show("#piechart");
            });
            $(".squat").click(function () {
            show("#piechartS");
            });
            $(".benchpress").click(function () {
            show("#piechartB");
            });
            $(".deadlift").click(function () {

               show('');
            });
        });

编辑，开始工作并在开始时隐藏

Answer 2

以下是您发布的内容的实际示例 - 似乎已被打破？

$(document).ready(function () {
        $(".total").click(function () {
            $("#piechart").removeClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".squat").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").removeClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".benchpress").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").removeClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".deadlift").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").removeClass('hidden');
        });
    });

.hidden {
  display: none;
}
button {
  cursor: pointer;
}
#piechart {
  border: 1px dotted blue;
}
#piechartS {
  border: 1px dotted red;
}
#piechartB {
  border: 1px dotted green;
}
#piechartD {
  border: 1px dotted black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="piechart" class="repPieChart">A</div>                
<div id="piechartS" class="repPieChart hidden">S</div>
<div id="piechartB" class="repPieChart hidden">B</div>
<div id="piechartD" class="repPieChart hidden">D</div>

<button class="total">
Total!
</button>
<button class="squat">
Squat!
</button>
<button class="benchpress">
Benchpress!
</button>
<button class="deadlift">
Deadlift!
</button>

但是，你可以大大缩短这一点。下面，我为每个按钮添加了一个data-for属性，以便它引用一个特定的div，然后我只显示相关的div并隐藏其所有兄弟：

$(document).ready(function() {
      $(".holdLiftMenuLI a").on("click", function() {
        $("#" + $(this).data("for")).removeClass("hidden")
          .siblings().addClass("hidden");
      });
    });

.hidden {
  display: none;
}
.holdLiftMenuLI {
  list-style-type: none;
}
.holdLiftMenuLI a {
  cursor: pointer;
}
#piechart {
  border: 2px solid blue;
}
#piechartS {
  border: 2px solid red;
}
#piechartB {
  border: 2px solid green;
}
#piechartD {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="piechart" class="repPieChart">A</div>
  <div id="piechartS" class="repPieChart hidden">S</div>
  <div id="piechartB" class="repPieChart hidden">B</div>
  <div id="piechartD" class="repPieChart hidden">D</div>
</div>

<div class="holdLiftMenu">
  <ul class="holdLiftMenuUL">
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA total current" data-for="piechart">Total</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA squat" data-for="piechartS">Squat</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA benchpress" data-for="piechartB">Benchpress</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA deadlift" data-for="piechartD">Deadlift</a></li>
  </ul>
</div>

改变上面的li和a只是改变jquery选择器的问题 - 其他一切继续正常工作。

jQuery addClass / removeClass（无法读取未定义的属性'length'）

2 个答案: