Показать и скрыть функции в Jquery

Question

Показать и скрыть функции в Jquery

0

Я написал код в html -3 Div, который появляется после переключателей. Я хочу, чтобы щелчок на каждой кнопке отображал код, который находится в этой кнопке div, и будет скрывать оба других div.

Здесь код:

<html>
    <body>
        <div>
            <form id="A" method="get" action="form.php"> <fieldset>
             <legend> A </legend>

                <div id="Headline">Headline: </div>
                <div><input type="radio" name="B" value="B" onclick="functionb('b')">  <img class="photos" src="b.gif" alt="b"><br><div id="b>Show B</div>
                    <input type="radio" name="C" value="C" onclick="functionc('c')"><img class="photos" src="c.gif" alt="c"><br><div id="c">Show C</div>
                    <input type="radio" name="d" value="d" onclick="functiond('d')"><img class="photos" src="d.gif" alt="d"></div><br><div id="d">Show D</div>

             </fieldset>
        </form>
    </div>
  </body>
</html>

Я написал следующий код в JS файле (мне нужно поместить все скрипты в другой файл, который является html-one) только для первой кнопки:

       $(document).ready(function(){
          $("#b").click(function(){
            $("#b").show();
            $("#c").hide();
            $("#d").hide();
           });
       });

и он не делает действия, необходимые при нажатии первой кнопки... Будь рад получить любую помощь - спасибо!

Bramat 16 дек. 2013, в 20:25

Источник

0

Можете ли вы добавить больше деталей?
Rajaprabhu Aravindasamy 16 дек. 2013, в 19:24
2

Этот код JS не имеет смысла; у вас нет ничего с id v или i в HTML выше.
Ed Cottrell♦ 16 дек. 2013, в 19:24
0

где вы взяли эти идентификаторы. они не используются в вашем html.
Irfan TahirKheli 16 дек. 2013, в 19:25
0

Не говоря уже о том, что нажатие на «v» покажет «v», зачем показывать что-то после того, как на него нажали, не нужно ли показывать его, чтобы нажать на него?
Josh Mc 16 дек. 2013, в 19:25
0

Хорошо, чтобы начать с ваших входных данных, нужно иметь конечные теги <input ... />, то же самое с изображениями, что означает, что #v означает, что в вашей разметке нет элемента с id = "v", также, пожалуйста, не используйте onclick = «..» это плохая практика с разделением интересов
dbarnes 16 дек. 2013, в 19:26
0

Вы правы, я изменил HTML на ABC, чтобы он не был полон запутанной информации ... он должен выглядеть следующим образом: $ (document) .ready (function () {$ ("# a"). click (function () {$ ("# a"). show (); $ ("# b"). hide (); $ ("# c"). hide ();});});
Bramat 16 дек. 2013, в 19:26
0

Как вы можете нажать на элемент, который скрыт? @Bramat
Irfan TahirKheli 16 дек. 2013, в 19:29
0

Я хочу скрыть то, что находится в div после кнопки - когда я нажимаю на одну из других кнопок ...
Bramat 16 дек. 2013, в 19:33
0

Я отредактировал его сейчас - надеюсь, это будет понятнее ... Мне нужно, чтобы все три кнопки были видны постоянно - и при нажатии на первую кнопку (id = "b") 'будет видно только содержимое b, а c и не буду @Rajaprabhu Аравиндасами
Bramat 16 дек. 2013, в 19:45

Показать ещё 7 комментариев

Теги:

javascript

jquery

html

3 ответа

0

попробуйте получить доступ к элементу по атрибуту name:

$('input[name=B]').click(function(){// your action here});

или если вам нужно получить доступ по id, добавьте атрибут id:

<input type="radio" id="B" name="B" value="B" onclick="functionb('b')"><img class="photos" src="b.gif" alt="b"><br /><div id="b" class="ButtonDisplayDiv">Show B</div>

Zaheer Ahmed 16 дек. 2013, в 18:13

0

Установите общий класс в ваших "дисплеях дисплея кнопок",

<div>
  <input type="radio" name="b" value="B"><img class="photos" src="b.gif" alt="b"><br /><div id="b" class="ButtonDisplayDiv">Show B</div>
  <input type="radio" name="c" value="C"><img class="photos" src="c.gif" alt="c"><br /><div id="c" class="ButtonDisplayDiv">Show C</div>
  <input type="radio" name="d" value="D"><img class="photos" src="d.gif" alt="d"><br /><div id="d" class="ButtonDisplayDiv">Show D</div>
</div>

Затем для вашего обработчика событий переключателя

$('input[type="radio"]').change(function () {
   $('.ButtonDisplayDiv').hide(); //hide all the ButtonDisplayDiv Class Elements
   $('#' + $(this).attr('name')).show;  //show the associated selected div
});

Mark 16 дек. 2013, в 17:08

Ещё вопросы

Можете ли вы добавить больше деталей?
Этот код JS не имеет смысла; у вас нет ничего с id v или i в HTML выше.
где вы взяли эти идентификаторы. они не используются в вашем html.
Не говоря уже о том, что нажатие на «v» покажет «v», зачем показывать что-то после того, как на него нажали, не нужно ли показывать его, чтобы нажать на него?
Хорошо, чтобы начать с ваших входных данных, нужно иметь конечные теги <input ... />, то же самое с изображениями, что означает, что #v означает, что в вашей разметке нет элемента с id = "v", также, пожалуйста, не используйте onclick = «..» это плохая практика с разделением интересов
Вы правы, я изменил HTML на ABC, чтобы он не был полон запутанной информации ... он должен выглядеть следующим образом: $ (document) .ready (function () {$ ("# a"). click (function () {$ ("# a"). show (); $ ("# b"). hide (); $ ("# c"). hide ();});});
Как вы можете нажать на элемент, который скрыт? @Bramat
Я хочу скрыть то, что находится в div после кнопки - когда я нажимаю на одну из других кнопок ...
Я отредактировал его сейчас - надеюсь, это будет понятнее ... Мне нужно, чтобы все три кнопки были видны постоянно - и при нажатии на первую кнопку (id = "b") 'будет видно только содержимое b, а c и не буду @Rajaprabhu Аравиндасами

talemyn · Accepted Answer · 2013-12-16T18-46-00.000Z

Похоже, есть несколько вещей, которые вам нужно решить. , ,

Во-первых, вы говорите, что вы нажимаете на переключатель и что он должен показывать связанный div и скрывать другие. Затем вы показываете этот раздел кода (добавленные мной комментарии):

$(document).ready(function() {
    $("#v").click(function() {  // This is the button click
        $("#v").show();         // This shows the related div
        $("#a").hide();         // This hides "other div" number 1
        $("#i").hide();         // This hides "other div" number 2
    });
});

Проблема в том, что вы ссылаетесь на переключатель с атрибутом id целевого элемента <div> ($("v")). Вам нужно ссылаться на радиокнопку иначе, например $("input[name='v']") (так как имена должны быть уникальными в форме). Это выбирает вход с атрибутом name, равным "v".

В конце концов, однако, вы должны, вероятно, сделать функцию общей, так что вам не нужно ссылаться на каждый переключатель. Например, вы можете сделать это, захватив все радио кнопки в форме. , , как это:

$("#A").find("input[type='radio']")

Это приведет к тому, что все входы радиокнопки будут записаны в форме "А". Затем вы можете прикрепить функцию щелчка к каждому из них (см. Ниже).

Во-вторых, я бы рекомендовал, чтобы все div были общим классом. Таким образом, вы можете привязать .hide() к общему классу, а не к отдельным id. Затем вы можете вернуться и показать конкретный <div> после того как все они были спрятаны первыми.

Используя два вышеприведенных предложения (и удалив часть вашего другого кода, просто чтобы упростить мой ответ... вы можете добавить его обратно в свой последний код :)), вот пример того, что может сработать для вас:

HTML

<form id="a" method="get" action="form.php">
    <input type="radio" name="b" value="b">
    <img class="photos" src="b.gif" alt="b"><br>
    <div id="b" class="subForm">Show B</div>

    <input type="radio" name="c" value="c">
    <img class="photos" src="c.gif" alt="c"><br>
    <div id="c" class="subForm">Show C</div>

    <input type="radio" name="d" value="d">
    <img class="photos" src="d.gif" alt="d"></div><br>
    <div id="d" class="subForm">Show D</div>
</form>

JS

$(document).ready(function(){
    $("#a").find("input[type='radio']").click(function() {
        $(".subForm").hide();
        $("#" + $(this).attr("name")).show();
    });
});

При таком подходе вы собираете все радиокнопки в форме и присоединяете к ним общую функцию "щелчка". Функция будет скрыть все дивы (ныне маркированных с общим классом "подчиненного"), а затем покажет DIV, который имеет id атрибут, который соответствует name атрибута радио - кнопка, которая была нажата.

Большое спасибо!!! работает как шарм :)