Форум Сайтостроение Веб-строительство

el.hasClass в JS

12
D
На сайте с 28.06.2008
Offline
1114
Dram
469

Есть такой код

jQuery(document).ready(function(){
setTimeout(function(){
jQuery(document).on("click", ".quest", function(e){
var el = jQuery('#questdiv');
if(!el.html()){
if(el.hasClass('moscow'))el.html('<span>инфа №0</span>');
else if(el.hasClass('spb'))el.html('<span>инфа №1</span>');
else if(el.hasClass('goroda'))el.html('<span>инфа №2</span>'); //это я сейчас пытаюсь добавить.
else el.html('<span>инфа №3</span>');
}
if(el.css

Он отвечает за работу вопросика на сайте, по которому кликают юзеры и им открывает окошечко с инфой.

Теперь возникла необходимость показывать не некоторых страницах два таких вопросика (раньше он на странице был всегда один).

В пхп вопросик прописан так


<span class="quest">?</span>
<div class="questdiv moscow" id="questdiv"></div>
<div class="clickme" id="clickme"></div>

Ну и решил я по аналогии добавить еще один вопросик. В пхп на нужных страницах прописал

<span class="quest">?</span>
<div class="questdiv goroda" id="questdiv"></div>
<div class="clickme" id="clickme"></div>

а в JS добавил строку

else if(el.hasClass('goroda'))el.html('<span>инфа №2</span>');

В итоге на страницах где два вопросика при клике по вопросику инфа потягивается из первого else if (того что я добавил, а

else el.html('<span>инфа №3</span>'); работать перестал. При клике по второму вопросику показывается то же что и при клике по первому.

На страницах где один вопросик с вариантом текста №3 - все работает нормально.

Где я ошибся? Я так думаю потому что у двух вопросиков одинаковый var el = jQuery('#questdiv'); ?

Chkan
На сайте с 22.10.2008
Offline
129
Chkan
#1

Да, лучше к class привязаться, var el = jQuery('.questdiv');

Устали разбираться в AI? Выход здесь: https://vk.cc/cNtMsW
D
На сайте с 28.06.2008
Offline
1114
Dram
#2

Chkan, не помогло - при клике всплывало сразу две подсказки с обоих вопросиков.

Пока решил криво - написав новую функцию

jQuery(document).ready(function(){
setTimeout(function(){
jQuery(document).on("click", ".quest2", function(e){
var el = jQuery('#questdiv2');
if(!el.html()){.......

Где всем идентификаторам добавил цифру 2.

Убого конечно, должен быть путь проще и изящнее... но я его пока не вижу. :(

Автоматизируй Яндекс-Директ, Adwords, Вконтакте Сайт в разрешенных, но Масштабирование объявлений - показ
Chkan
На сайте с 22.10.2008
Offline
129
Chkan
#3

можно вот так попробовать, через parent контейнер 


<div>

  <span class="quest">?</span>

  <div class="questdiv moscow" id="questdiv"></div>

  <div class="clickme" id="clickme"></div>

</div>



<div>

  <span class="quest">?</span>

  <div class="questdiv moscow" id="questdiv"></div>

  <div class="clickme" id="clickme"></div>

</div>



<script>

jQuery(document).ready(function(){

setTimeout(function(){

jQuery(document).on("click", ".quest", function(e){

var el = jQuery(this).parent().find('.questdiv');

if(!el.html()){

if(el.hasClass('moscow'))el.html('<span>инфа №0</span>');

else if(el.hasClass('spb'))el.html('<span>инфа №1</span>');

else if(el.hasClass('goroda'))el.html('<span>инфа №2</span>'); //это я сейчас пытаюсь добавить.

else el.html('<span>инфа №3</span>');

}});

</script>
Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#4

Dram, у вас архитекнурно не очень хорошо сложено. Пример более лучшего варианта https://jsfiddle.net/webxz/aq6Lxw4f/

D
На сайте с 28.06.2008
Offline
1114
Dram
#5

Chkan, у вас диви одинаковые - так и нужно? Попробовал с вторым таким дивом

<span class="quest">?</span>
<div class="questdiv goroda" id="questdiv"></div>
<div class="clickme" id="clickme"></div>

открывается только подсказка №2 которая выше в коде.

---------- Добавлено 02.09.2019 в 12:06 ----------

Gerga, немножко не красивенько ваш вариант.

Коррекция опечаток в подсказках Новинки Google: поисковые подсказки Нужно больше ключевых слов,
Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#6
Dram:
Gerga, немножко не красивенько ваш вариант.

Хм. Почему?

Например в нем div создается только при необходимости + абстракция получения данных функцией getAnswer + хорошо расширяется.

D
На сайте с 28.06.2008
Offline
1114
Dram
#7

Gerga, инфа не убирается по второму клику, там и остается там на странице..

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#8

Dram, ага. Ну show() можно поменять на toggle() :)

https://jsfiddle.net/webxz/4jcb6k2z/

или так сделать:

https://jsfiddle.net/webxz/1vaznoc7/

Закрытие будет при нажатии на [close]

Chkan
На сайте с 22.10.2008
Offline
129
Chkan
#9
Dram:
Chkan, у вас диви одинаковые - так и нужно? Попробовал с вторым таким дивом

открывается только подсказка №2 которая выше в коде.

---------- Добавлено 02.09.2019 в 12:06 ----------

Gerga, немножко не красивенько ваш вариант.

смысл в том чтоб конструкция 


<span class="quest">?</span>

<div class="questdiv goroda" id="questdiv"></div>

<div class="clickme" id="clickme"></div>

находилась в отдельном контейнере от другой подобной конструкции, т.е. в каждая в отдельном div 


<div>

<span class="quest">?</span>

<div class="questdiv goroda" id="questdiv"></div>

<div class="clickme" id="clickme"></div>

</div>

<div>

<span class="quest">?</span>

<div class="questdiv moscow" id="questdiv"></div>

<div class="clickme" id="clickme"></div>

</div>
D
На сайте с 28.06.2008
Offline
1114
Dram
#10

Gerga, большое спасибо, сделал по вашему, все работает!

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий