Примените JQuery к нажатым элементам div

Question

Примените JQuery к нажатым элементам div

0

Я работаю над составлением списка номеров с каждым номером на его отдельном div. До сих пор я могу удалить div с Javascript (по щелчку), но я хотел бы включить JQuery, чтобы добавить класс в div, а затем удалить все div этого класса с помощью кнопки или чего-то подобного,

<!DOCTYPE html>
<html>
<head> 
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>

<style>
    .divContainer {
        width: 35px;
        height: 25px;
        border: solid 1px #c0c0c0;  
        background-color: #e1e1e1;
        font-family: verdana;   
        float: left;
    }
    .text {
        font-size: 15px;
        font-family: verdana;
        color: black;
        margin-top: 4px;
    }
    h4 {
        font-family: Verdana;
        color: black;
        text-decoration: none;
    }
</style>

</head>
<body>
<h4>Double click para borrar un numero</h4>
<script type="text/javascript">
    for(var i = 1; i <= 639; i++){
        var divTag = document.createElement("div");
        divTag.id = i;
        divTag.className = "divContainer";
        document.body.appendChild(divTag);
        divTag.ondblclick = function(){this.parentNode.removeChild(this)};
        var pTg = document.createElement("p");
        pTg.setAttribute("align", "center");
        pTg.className = "text";
        pTg.innerHTML = (i);
        document.getElementById(i).appendChild(pTg);
    }
</script>
</body>
</html>

http://jsfiddle.net/ramonfabrega/AZSy8/

Для простоты я просто попытался скрыть нажатие на div, но JQuery, похоже, не работает. Так что что-то должно быть выключено.

Ramon F 04 апр. 2014, в 06:23

Источник

Теги:

javascript

class

jquery

html

list

3 ответа

0

Это создаст и добавит обработчик кликов одновременно.

$('<div>').click(function(e){ this.addClass('active');})

Joel Stransky 04 апр. 2014, в 02:04

0

Fiddle Demo

вы не включаете библиотеку jQuery в скрипку

измените $('divTag') на $('div')

Чтение $ ("element")

$(document).ready(function () {
    $('div').click(function () {
        $(this).hide();
    });
});

Начать обучение

Документация API jQuery

Tushar Gupta 04 апр. 2014, в 01:49

1

Хорошо, спасибо. Ценю твою помощь
Ramon F 04 апр. 2014, в 04:29
0

@ user3495678 Рад, что помогло :)
Tushar Gupta - curioustushar 04 апр. 2014, в 04:30

Ещё вопросы

Хорошо, спасибо. Ценю твою помощь

Jack · Accepted Answer · 2014-04-04T02-16-00.000Z

Два вопроса:

1) jQuery не был загружен.
2) Вы пытались связать событие click с недопустимым selector (divTag вместо div)

Здесь обновленная скрипка: http://jsfiddle.net/LFC3A/2/

Что касается №2 - jQuery позволяет вам выбрать один из нескольких способов. Наиболее распространенным является использование selector. Большинство селекторов поддерживает jQuery из CSS 1 - 3, хотя jQuery поддерживает некоторые из своих собственных селекторов (например, div:eq, div:gt и т.д.). Посмотрите страницу селекторов здесь: http://api.jquery.com/category/selectors/

Теперь, если ваша разметка была:

<body>
    <divTag>My Custom Div Tag</divTag>
    <div>My regular DIV</div>
</body>

Тогда твоя оригинальная скрипка сработала бы. На самом деле, здесь обновленная скрипка, демонстрирующая, что: http://jsfiddle.net/FpMAw/ (я обновил ваш элемент createElement, чтобы вернуть пользовательский элемент divTag)

Другой способ доступа к jQuery - это передать ему элемент DOM. Что-то вроде:

var $body = $(document.body) эквивалентен var $body = $('body')

Если вы ссылаетесь на это, у вас теперь есть объект jQuery с кучей полезных вспомогательных методов. Итак, в нашем предыдущем примере мы можем теперь:

$body.css('color', 'red')

Надеюсь, это поможет объяснить немного больше, почему это не сработало. Если у вас есть другие вопросы, не стесняйтесь спрашивать :)

Хорошо, это сработало, но могу ли я узнать, что было неправильно? Я только недавно начал программировать через CodeHS и Codecademy, так что было бы неплохо узнать
Здравствуйте, @ user3495678 - Обновил мой ответ, чтобы объяснить, почему ваш оригинальный код не работает. Надеюсь, это поможет! Удачи в изучении JavaScript :)