Question

我有一个表单，我的过滤器下面有按钮（应用过滤器和清除过滤器）我正在尝试显示＆＃39;清除＆＃39;什么时候申请＆＃39;单击按钮并隐藏＆＃39;清除＆＃39;单击按钮时的按钮。

以下代码，如果我的桌子有什么：

<dl class="filterlist" style="margin-top: 0px">
        <dt>
            <label for="Environment">Environment</label>
        </dt>
        <dd>
            @Html.DropDownList("EnvironmentDD", (IEnumerable<SelectListItem>)ViewBag.Environment, "- - All Environments - -", 
                new { @class = "ddstyle", @id = "Environment", @title = "Filter the table below by environment." })
        </dd>
        <dt>
            <label for="Product">Product</label>
        </dt>
        <dd>
            @Html.DropDownList("ProductDD", (IEnumerable<SelectListItem>)ViewBag.Product, "- - All Products - -", 
                new { @class = "ddstyle", @id = "Product", @title = "Filter the table below by product." })
        </dd>
        <dt>
            <label for="TestType">Test Type</label>
        </dt>
        <dd>
            @Html.DropDownList("TestTypeDD", (IEnumerable<SelectListItem>)ViewBag.TestType, "- - All Test Types - -", 
                new { @class = "ddstyle", @id="TestType", @title="Filter the table below by test type." })
        </dd>
        <dt>
            <label for="TestScenario">Test Scenario</label>
        </dt>
        <dd>
            @Html.DropDownList("ScenarioDD", (IEnumerable<SelectListItem>)ViewBag.Scenario, "- - All Test Scenarios - -", 
                new { @class = "ddstyle", @id="TestScenario", @title="Filter the table below by test scenario." })
        </dd>
        <dt>&nbsp;</dt>
        <dd>
            <button class="butstyle" id="ApplyFilter" type="submit" title="Click to apply any filters selected above.">
                Apply Filter(s) <i class="fa fa-filter"></i>
            </button>
            <button class="butstyle" id="ClearFilters" title="Click to reset any filters set." style="display:none">
                Clear Filter(s) <i class="fa fa-eraser"></i>
            </button>
        </dd>
    </dl>

我怎么能做到这一点或者什么是最好的方式，因为我似乎无法理解它。我正在使用HTML5＆amp; MVC5。

默认情况下，按钮设置为：

style="display:none">

Answer 1

我不认为这可以在不使用javascript / jquery的情况下完成使用jQuery ..这就是你要找的东西

$("#ApplyFilter").click(function(){
$("#ClearFilters").toggle();
    $(this).toggle();
});
$("#ClearFilters").click(function(){
$("#ApplyFilter").toggle();
    $(this).toggle();
});

检查我用你的HTML制作的fiddle。

Answer 2

没有JQuery：

<button onclick="document.getElementById('ClearFilters').style.display='block';" class="butstyle" id="ApplyFilter" type="submit" title="Click to apply any filters selected above.">
    Apply Filter(s) <i class="fa fa-filter"></i>
</button>
<button onclick="document.getElementById('ClearFilters').style.display='none';" class="butstyle" id="ClearFilters" title="Click to reset any filters set." style="display:none">
    Clear Filter(s) <i class="fa fa-eraser"></i>
</button>

唯一的另一种方法是在按下按钮时重新加载页面并检查按下了哪个按钮...

Answer 3

已经决定虽然隐藏了＆＃39; Clear＆＃39;按钮将是一个很好的选择，它应始终显示，并可能在将来修复，以便在应用程序启动并运行后隐藏它。

感谢所有评论/帮助。

隐藏＆＃39;清除＆＃39;按钮直到“应用”＃39;点击按钮

3 个答案: