Показать другую кнопку при загрузке страницы через Jquery

Question

У меня есть сайт ASP.net MVC2, который я разработал.У меня небольшая проблема с дизайном.Я хочу, чтобы кнопка менялась при загрузке представления.Например, когда определенная переменная равна определенному значению, я хочу, чтобы одна кнопка отображалась, а другая - исчезала.То, что я имею до сих пор, - это в основном реализация этой идеи в jquery.Но пока мой код jquery не вызывается (у меня есть набор отладчика внутри jquery, поэтому я знаю, что он не вызывается).Я попытался поместить код в $ (document) .ready (function () ... и $ (document) .load (function () ...

, код по-прежнему не загружаетсяВот что я пытался сделатькнопка или другое, может быть либо none, либо block в зависимости от обстоятельств. Каков наилучший способ заставить код Jquery выполняться при первом запуске страницы? И как бы вы реализовали такую ​​схему? Это лучший способ сделать это?, или я должен подумать над тем, как изменить эту функцию? Спасибо за ваше время.

Answer 1

Давайте попробуем немного почистить ваш код.Предположим, что toggle - это логическая переменная, определенная ранее на странице, хотя это плохо, и вам следует использовать модели представления :

<% bool toggle = true; %>

<script type="text/javascript">
    $(function() {
        var buttonTog = $("#test1");
        var buttonTog1 = $("#Submit1");
        var toggle = <%= new JavaScriptSerializer().Serialize(toggle) %>;
        if (toggle) {
            buttonTog1.show();
            buttonTog.hide();
        } else {
            buttonTog1.hide();
            buttonTog.show();
        }
    });
</script>

Но при условии, что у вас есть эта информация на сервере (ион у вас есть, поскольку вы определяете переменную-переключатель на сервере) Я бы порекомендовал вам напрямую применить соответствующие CSS-классы к указанным кнопкам на сервере.Таким образом, вам даже не нужно использовать какой-либо JavaScript.Просто:

<button type="submit" id="test1" class="<%= Html.ToggleClass(toggle) %>">Test1</button>
<button type="submit" id="Submit1" class="<%= Html.ToggleClass(!toggle) %>">Submit1</button>

, где ToggleClass будет настраиваемым помощником HTML, возвращающим правильное имя класса CSS на основе значения параметра:

public static class HtmlExtensions
{
    public static string ToggleClass(this HtmlHelper htmlHelper, bool toggle)
    {
        return toggle ? "visible" : "hidden";
    }
}

и, наконец, в вашем файле CSS:

.visible {
    display: block;
}

.hidden {
    display: none;
}

Answer 2

Изменить следующие

var $b = <%=toggle %>;

на

var b = '<%=toggle %>';

if(b=="1"){
$("#Submit1").hide()
}

Answer 3

есть более простой способ, просто дать класс «видимый» для кнопок, которые должны быть видимыми, и «скрытый» для тех, которые не предназначены для просмотра, тогда вы можете делать с ними все, что захотите, используяJQuery или CSS