JQuery - переключать регистр в зависимости от установленного флажка - PullRequest
Новая
       9

JQuery - переключать регистр в зависимости от установленного флажка

0 голосов
/ 11 февраля 2012

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

<div">
    <input type="checkbox" id="test1" />
</div>
<div>
    <input type="checkbox" id="test2" />
</div>

<script type="text/javascript">

$(function () {
    $(':checkbox').click(function () {
        if ($(this).prop('checked', true)) {
            switch(this.id) {

                    case "test1";
                    var newDiv = $('<div><p>it worked!!</p></div>');

            break;

            case "test2";
                    var newDiv = $('<div><p>it worked again!!</p></div>');

            break;

            default;
            }
            newDiv.insertAfter($(this));

            $(this).after(newDiv);
        } else {
            $(this).next().filter('div').remove();
        }
    });
});

</script>

Я надеюсь, что кто-то может помочь!

Ответы [ 4 ]

1 голос
/ 11 февраля 2012

Так много неправильного - так мало ...

Первая проблема: 

switch(this.id)

Что должно быть: 

switch($(this).attr('id')) // Need to wrap in jQuery object

Кроме того, ваш оператор switchнеправильно.Обратите внимание на : после case, а не ;, как у вас. 

switch(n) {
    case 1:
        // Something
        break;
    case 2:
        // Something
        break;
    default:
        // Something
}

Вам необходимо объявить newDiv вне оператора switch, чтобы получить к нему доступ позже.Затем, эти один за другим не имеют смысла, они делают то же самое 

newDiv.insertAfter($(this)); // Keep this one
$(this).after(newDiv);

И у вас есть лишний " в вашем html, который, вероятно, был помещен по ошибке ... 

<div">

Наконец, вы смешиваете двойные кавычки и одинарные кавычки, которые потом вызовут головную боль.Я предлагаю вам выбрать один или другой.

1 голос
/ 11 февраля 2012

почему бы просто не настроить функции щелчка для этих конкретных идентификаторов? 

$("#test1").click(function(){  $("your div1").show(); });
$("#test2").click(function(){  $("your div1").show(); });
0 голосов
/ 11 февраля 2012

Вот альтернативное решение: 

<div>
  <input type="checkbox" id="div1" />
</div>

<div data-id='div1' style='display:none;'><p>it worked!</p></div>
<div data-id='div2' style='display:none;'><p>it worked again!</p></div>


$(function () {
  $(':checkbox').click(function () {
    var $box = $(this);    
    $("div[data-id='"+$box.attr('id')+"']").show();
  });
});
0 голосов
/ 11 февраля 2012

как то так может быть? 

<div>
    <input type="checkbox" id="test2" />
    <span style="display:none;"><div><p>it worked!</p></div></span>
</div>
<div>
    <input type="checkbox" id="test2" />
    <span style="display:none;"><div><p>it worked again!</p></div></span>
</div>
$(function () {
 $(':checkbox').click(function () {
  if ($(this).prop('checked', true)) {
   $(this).after($(this).next('span'));
  }
 });
});
...