Как поправить в jquery display: non;?

Question

[sanke46]

делаю на сайте 3 слайдера как бы 3 цвета телефонов (при клике должны 2 закрываться и 1 открываться), но почему то не работает хотя код правильный

вот сайт - top-telefon.by

html code :

<div class="demo aa">
    <ul id="lightSlider-2">
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>

    </ul>
</div>

<div class="demo dd" style="display: none;">
    <ul id="lightSlider">
        <li data-thumb="img/phone-20-2.png">
            <img src="img/phone-20-2.png" />
        </li>
        <li data-thumb="img/phone-20-2.png">
            <img src="img/phone-20-2.png" />
        </li>
        <li data-thumb="img/phone-20-2.png">
            <img src="img/phone-20-2.png" />
        </li>
        <li data-thumb="img/phone-20-2.png">
            <img src="img/phone-20-2.png" />
        </li>

    </ul>
</div>

<div class="demo cc" style="display: none;">
    <ul id="lightSlider-3">
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>
        <li data-thumb="img/phone-20.png">
            <img src="img/phone-20.png" />
        </li>

    </ul>
</div>

jquery code :

$(".hua-2").click(function(){
  $(".cc").hide()
  $(".dd").hide()
  $(".aa").show()
})

$(".hua-1").click(function(){
 $(".cc").hide()
  $(".dd").show()
  $(".aa").hide()
})

$(".hua-3").click(function(){
  $(".cc").show()
  $(".dd").hide()
  $(".aa").hide()
})

второй вариант JQ :

$(".hua-2").click(function(){
  $(".cc").css("display","none");
  $(".dd").css("display","block");
  $(".aa").css("display","none");
})

$(".hua-1").click(function(){
  $(".cc").css("display","none");
  $(".dd").css("display","none");
  $(".aa").css("display","block");
})

$(".hua-3").click(function(){
  $(".cc").css("display","block");
  $(".dd").css("display","none");
  $(".aa").css("display","none");
})

Answer 1

[Илья]

Первое. Вы обрабатываете нажатие на элементы hua-1 hua-2 hua-3 которых у вас в коде нет
Второе. Второй и третий div изначально скрыты, как вы по ним собираетесь нажимать?
Третье. Есть отличные примеры anton.shevchuk.name/javascript/jquery-for-beginners

П.С. Судя по сайту скрипты работаю, с контентом что то не то. Видимо его просто нет.

Comments

[sanke46]

я дурак и забыл указать кнопки hua-1,2,3 (на сайте это цвет телефона вся проблема в нем)

Answer 2

[Максим]

мне только кнопки не понравились

а всё остальное нормально работает

Comments

[sanke46]

я дурак и забыл указать кнопки hua-1,2,3 (на сайте это цвет телефона вся проблема в нем)

Answer 3

[Roman Sokolov]

Просто у тебя DOM не обновляется.

Comments

[sanke46]

я дурак и забыл указать кнопки hua-1,2,3 (на сайте это цвет телефона вся проблема в нем)

Answer 4

[Сергей Грибок]

Как вам уже советовали выше, прочтите книгу Антона Шевчука. Почерпнете много полезного.Jquery для начинающих

А то стили прописнные в аттрибуте "style" ну очееньь хардкорно.

<script>
function doSomething(){ /* … */ }
/* раздается хруст сломанных костей запястья, чтобы не печатал */
</script>
<style>
p { line-height:20px; }
/* крхххх… берцовая кость, и на работу уже не пойдет */
</style>
<div style="color:red;font-size:1.2em">
<p onclick="doSomething();">Lorem ipsum dolor sit amet...</p>
<!-- тыдыщь, головой об стол… насмерть. как жест милосердия -->
</div>

Comments

[sanke46]

я дурак и забыл указать кнопки hua-1,2,3 (на сайте это цвет телефона вся проблема в нем)