jQuery仅显示一个div，并通过下拉选择更改或单击按钮切换其他div [英] Jquery show only a single div and toggle others via drop down select change or button click

问题描述

我试图一次仅显示一个div的内容，但是每个div应该能够切换下拉选择更改或单击一个按钮.

I am trying to show only a single div's content at a time but each div should be able to toggle on drop down selection change, or a button being clicked.

当用户从下拉菜单中选择一个选项时，它将显示一个表(并隐藏其他可见的div)，如果他们选择其他选项，则该表将更新(我已正确更新了该表).

When the user selects an option from a drop down it will display a table (and hide any other div that is visible), if they choose something else, the table will update (I have the table updating properly).

(下拉菜单中的所有选项都是通过MySQL查询生成的，并且是通过PHP生成的-第二个下拉菜单取决于第一个选择-可以使用.)

(All options within the drop downs are generated from a MySQL query, and generated via PHP - the second drop down is dependent on the first selection - this is working.)

当用户单击按钮时，它将显示一个表单并隐藏任何其他可见的div.

When the user clicks a button it will display a form and hide any other visible div.

有多个下拉菜单和多个按钮来显示不同的div内容.

There are multiple drop downs and multiple buttons to display different div content.

我的页面分为2个sections，一个是"adminpanel"，另一个是"content".所有下拉菜单和按钮都显示在"adminpanel"中，而我需要显示的所有数据都应显示在"content"部分内部的divs中.

I have my page seperated into 2 sections, one is "adminpanel" and the other is "content". All drop down's and buttons are displayed within the "adminpanel" and all data I need to be displaying should be showing up within the divs inside of the "content" section.

我遇到的最大问题是尝试一次仅显示一个内容div.

The biggest problem I am having is trying to only display one content div at a time.

HTML

<div class="content">
    <div class="toggle" id="accounts">
        //displays the account a user selects
    </div>

    <div class="toggle" id="facilities">
        //table
    </div> 

    <div class="toggle" id="users">
        //table
    </div>

    <div class="toggle" id="newaccount_form">
        //form
    </div>

    <div class="toggle" id="newfacility_form">
        //form
    </div

    <div class="toggle" id="newuser_form">
        //form
    </div>
</div>

然后，我有了从PHP文件生成的控件，这些控件从MYSQL数据库获取一些数据.

Then I have my controls that are generated from a PHP file that get some data from a MYSQL db.

<div id="adminpanel">
    <?php
        //Accounts
        echo $accountDropDown;
        echo "<button class='toggle_control' data='newaccount_form' id='newaccount'>New Account</button>";

        echo $facilityDropDown;
        echo"<button class='toggle_control' data='newfacility_form' id='newfacility'>New Facility</button>";

        //Users
        echo $userDropDown;
        echo "<button class='toggle_control' data='newuser_form' id='newuser'>New User</button>";
    ?>  
</div>

这是$ accountDropDown的样子，每个下拉菜单看起来都一样.

This is what the $accountDropDown looks like, each drop down looks the same.

while ($aRow = mysqli_fetch_array($accountData)) {
     $accountOptions .="<option class='toggle_control' data='accounts' value=\"".$aRow['account_id']."\">" . $aRow['account_name'] . "</option>";
}

$accountDropDown="  <label>Accounts: </label><br>
                    <select name='account' id='account'>
                        <option class='toggle_control' data='accounts' selected='selected' disabled='disabled' value=''>Select account</option>
                    " . $accountOptions . "
                    </select>";

这是我遇到的 JQuery 函数

    $(function(){
    $("#newaccount_form, #newuser_form, #newfacility_form").hide();

    $(".toggle_control").on('click', function() 
    {
    $(".toggle").hide("slow");
    var dataSelectorId = $(this).attr("data");
    if ($('#' + dataSelectorId).is(":hidden")) {
        $("#" + dataSelectorId).slideToggle("slow");
        }
    });
});

我在这里遇到的问题是，当用户在下拉选择器上进行更改时，隐藏了所有其他可见的div.

The problem I am having here is hiding all other visible divs when the user makes a change on the drop down selector.

每个按钮应击中一个click事件，而每个下拉菜单应击中一个change事件.

Each button should be hitting a click event, while each drop down should be hitting a change event.

我知道我做错了所有事情，如何确定是否触发了点击或更改事件，并相应地切换每个对应的div?

I know I am doing this all wrong, how should I be determining whether a click or change event gets triggered, and toggle each corresponding div accordingly?

推荐答案

我相信这就是您要寻找的东西，我意识到您的控件位于与您尝试切换的控件不同的div中.我必须在选择器的末尾添加"_form".这依赖于以下约定:对于每个控件，都有一个具有相同ID +"_form"的匹配div.

I believe this is what you are looking for, I realized your controls were in DIFFERENT divs than the ones you were trying to toggle. I had to add the "_form" to the end of the selector. This relies on the convention that for every control, there is a matching div with the same ID + "_form".

另一个问题是var内容超出了click事件的范围，因此我将其完全删除.这会使$(.content div")选择器重复，但是在此示例中可以.如果您确实希望将这组div存储在变量中，请将变量声明本身放在document.ready函数之外.

The other issue was that var content was out of scope in the click event, so I removed it altogether. This makes the $(".content div") selector repetitive but that is fine in this example. If you really want to store that set of divs in a variable, put the variable declaration itself outside the document.ready function.

我遇到的第三个问题是您使用一组对象(您的target_content)作为选择器，据我所知，这是行不通的.相反，我将选择器(作为字符串)放入了一个var中，并再次用于slideToggle和slideUp调用.

The THIRD issue I came across was that you were using a set of objects (your target_content) as a selector, which, to my knowledge, doesn't work. I instead put the selector (as a string) into a var and reused it for both slideToggle and slideUp calls.

//Hide and toggle all divs so the user can only see one div at a time. 
$(document).ready(function()
{
    //hide every div by its ID
    $(".content div").hide();

    $("#newaccount, #newuser, #newfacility, #account, #user").on("click", function()
    {
        var selector = '#'+ this.id + "_form";
        $(selector).slideToggle();
        $(".content div").not(selector).slideUp(); // or hide()    
    });
});

此处的工作示例:

http://jsfiddle.net/nnordhaus/4r9zyvtu/

这篇关于jQuery仅显示一个div，并通过下拉选择更改或单击按钮切换其他div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！