Событие клика JS в зависимости от ширины div

Question

Событие клика JS в зависимости от ширины div

0

Я пытаюсь изменить размер двух div с событием click в сочетании с запросом if. Если значение div #slide_3_1 равно 100% а #arrow_right_3, то div #slide_3_1 должен быть шириной 0px а div #slide_3_2 должен быть на 100% шириной.

Когда я нажимаю #arrow_right_3 ничего не происходит. Есть идеи? Благодарю!

var $div_width = $('#slide_3_1').attr('width');

$(document).ready(function(){
    $("#arrow_right_3").click(function(){
        if ($div_width > 0) {
            $("#slide_3_1").css('width', '0px');
            $("#slide_3_2").css('width', '100%');
        }
    });
});

HTML:

<div id="section_3" class="section">
    <div class="arrow_left" id="arrow_left_3">Arrow left</div>
    <div class="arrow_right" id="arrow_right_3">Arrow right</div>
    <div id="slide_3_1" class="slide"></div>
    <div id="slide_3_2" class="slide"></div>
    <div id="slide_3_3" class="slide"></div>
</div>

turboLoop 18 фев. 2014, в 18:08

Источник

0

Я предполагаю, что d$iv_width является опечаткой? (первая строка). Если нет, то это ваша проблема.
Matt Burland 18 фев. 2014, в 16:11
0

Можете ли вы вставить точку останова в свой обработчик click и посмотреть, вызывается ли вообще обработчик события?
Matt Burland 18 фев. 2014, в 16:12
0

Я проверил опечатку. Когда дело доходит до точки останова, она не вызывается
turboLoop 18 фев. 2014, в 16:33
0

Если ваша функция не вызывается, значит что-то не так с тем, как вы ее связываете. Можете ли вы показать свой HTML?
Matt Burland 18 фев. 2014, в 16:38
0

<div id = "section_3" class = "section"> <div class = "arrow_left" id = "arrow_left_3"> Стрелка влево </ div> <div class = "arrow_right" id = "arrow_right_3"> Стрелка вправо </ div > <div id = "slide_3_1" class = "slide"> </ div> <div id = "slide_3_2" class = "slide"> </ div> <div id = "slide_3_3" class = "slide"> </ div> </ div>
turboLoop 18 фев. 2014, в 16:40
0

Ваша привязка работает нормально . Конечно, как предложил @Jerodev, у вас есть проблема с использованием attr("width") потому что он вернет undefined как он у вас есть. Кроме того, вы должны переместить объявление переменной $div_width внутрь вашей функции готовности к документу, чтобы вы могли быть уверены, что div, к которому вы пытаетесь обратиться, действительно существует в то время.
Matt Burland 18 фев. 2014, в 16:47

Показать ещё 4 комментария

Теги:

javascript

html

if-statement

click

3 ответа

1

Объединяя все в комментариях, здесь работает скрипка:

http://jsfiddle.net/N994Z/1/

$(function() {
    var $div_width = $('#slide_3_1').width();
    $("#arrow_right_3").click(function () {
        if ($div_width > 0) {
            $("#slide_3_1").css('width', '0px');
            $("#slide_3_2").css('width', '100%');
        }
    });
}

Matt Burland 18 фев. 2014, в 14:52

0

Из вашего вопроса, похоже, у вас есть два div с id "slide_3_1"

"Если на div # slide_3_1 на 100% и нажата стрелка" стрелка_право_3 ", чем другой div # slide_3_1 должен быть шириной 0px",

simonmoonlandings 18 фев. 2014, в 13:27

0

Я извиняюсь за мой английский, конечно есть только один div # slide_3_1;)
turboLoop 18 фев. 2014, в 16:21
0

в этом случае я бы пошел с ответом Джеродева
simonmoonlandings 18 фев. 2014, в 16:22

Ещё вопросы

Я предполагаю, что d$iv_width является опечаткой? (первая строка). Если нет, то это ваша проблема.
Можете ли вы вставить точку останова в свой обработчик click и посмотреть, вызывается ли вообще обработчик события?
Я проверил опечатку. Когда дело доходит до точки останова, она не вызывается
Если ваша функция не вызывается, значит что-то не так с тем, как вы ее связываете. Можете ли вы показать свой HTML?
<div id = "section_3" class = "section"> <div class = "arrow_left" id = "arrow_left_3"> Стрелка влево </ div> <div class = "arrow_right" id = "arrow_right_3"> Стрелка вправо </ div > <div id = "slide_3_1" class = "slide"> </ div> <div id = "slide_3_2" class = "slide"> </ div> <div id = "slide_3_3" class = "slide"> </ div> </ div>
Ваша привязка работает нормально . Конечно, как предложил @Jerodev, у вас есть проблема с использованием attr("width") потому что он вернет undefined как он у вас есть. Кроме того, вы должны переместить объявление переменной $div_width внутрь вашей функции готовности к документу, чтобы вы могли быть уверены, что div, к которому вы пытаетесь обратиться, действительно существует в то время.
Я извиняюсь за мой английский, конечно есть только один div # slide_3_1;)
в этом случае я бы пошел с ответом Джеродева

Jerodev · Accepted Answer · 2014-02-18T14-23-00.000Z

У вас есть опечатка в вашем коде, в первой строке это должно быть "$ div_width".

Кроме того, вы должны получить ширину, используя '$ div.width()'. Это всегда будет возвращать ширину, даже если элемент не имеет атрибута ширины.