JQuery addclass для выбранного div, удалить класс, если выбран другой div

Я делаю formbuilder, я хотел бы изменить внешний вид, например, div. Когда вы нажимаете, он должен получить границу, но когда щелкнут другой динамически сгенерированный div, класс должен быть удален, а второй щелчок div должен получить .active класс.

Как я могу сделать это с сгенерированными divs?

В любом случае я нашел что-то, что работает, но мне все еще нужно. Если выбран другой div, предыдущий div.removeclass и выбранный div.addclass

Это работает:

/* Add Class */
$(document).ready(function() {
    $( document ).on( 'click', '.HeadingDiv', function () { /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $('.HeadingDiv').removeClass('active'); /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $(this).addClass('active');
    });
});

Ответ 1

Вы ищете что-то вроде этого короткое и эффективное:

http://jsfiddle.net/XBfMV/

$('div').on('click',function(){
  $('div').removeClass('active');
  $(this).addClass('active');
});

вы можете просто добавить общий класс 'active' для выбранного div. при нажатии на div, удалите "активный" класс и добавьте его в щелчок div.

Ответ 2

Все о селекторе. Вы можете изменить свой код таким образом:

<div class="formbuilder">
    <div class="active">Heading</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Затем используйте этот javascript:

$(document).ready(function () {
    $('.formbuilder div').on('click', function () {
        $('.formbuilder div').removeClass('active');
        $(this).addClass('active');
    });
});

Пример в рабочем jsfiddle

Смотрите этот api о селекторе, который я использовал: http://api.jquery.com/descendant-selector/

Ответ 3

Вы можете использовать одну строку для добавления и удаления класса в div. Сначала удалите класс, чтобы добавить новый класс.

$('div').on('click',function(){
  $('div').removeClass('active').addClass('active');     
});

Ответ 4

В этом режиме вы можете найти весь элемент, который имеет класс active и удалить его

попробуйте это

$(document).ready(function() {
        $(this.attr('id')).click(function () {
           $(document).find('.active').removeClass('active');
           var DivId = $(this).attr('id');
           alert(DivId);
           $(this).addClass('active');
        });
  });

Ответ 5

Мне пришлось преобразовать divs в список элементов, иначе все мои divs получат этот класс, и только сгенерированные должны получить его. Спасибо всем, мне нравится этот сайт и полезные люди на нем!!!! Вы можете следить за проектом школы новичков в http://low-budgetwebservice.be/project/webbuilder.html предложения всегда приветствуются:). Так что это сработало для меня:

            /* Add Class Heading*/
            $(document).ready(function() {
            $( document ).on( 'click', 'ul#items li', function () { 
            $('ul#items li').removeClass('active'); 
            $(this).addClass('active');
            });
            });

Ответ 6

**This can be achived easily using two different ways:**

1)We can also do this by using addClass and removeClass of Jquery
2)Toggle class of jQuery

**1)First Way**

$(documnet.ready(function(){
$('#dvId').click(function(){
  $('#dvId').removeClass('active class or your class name which you want to    remove').addClass('active class or your class name which you want to add');     
});
});

**2) Second Way**

i) Here we need to add the class which we want to show while page get loads.
ii)after clicking on div we we will toggle class i.e. the class is added while loading page gets removed and class which we provide in toggleClss gets added :)

<div id="dvId" class="ActiveClassname ">
</div

$(documnet.ready(function(){
$('#dvId').click(function(){
  $('#dvId').toggleClass('ActiveClassname InActiveClassName');     
});
});


Enjoy.....:)

If you any doubt free to ask any time...