Как изменить событие onclick другим кликом?

function show() 
{ 
var elem = document.getElementById("pop").querySelector('li:nth-child(3)'); 
elem.style.width = "500px"; 
} 
</script>

У меня есть этот код, прикрепленный к OnClickКак изменить событие onclick другим кликом?

<li onclick="show()">

Элемент первоначально 200px, а затем превращается в 500px при нажатии. Как заставить его работать так, что, когда я нажму на него снова, он вернется к 200 ??

источник

2014-02-21 AllTheTime1111

Лучше всего было бы использовать класс CSS для установки ширины. Это имеет преимущество в том, что:

Вы не должны указать ширину в нескольких местах (CSS и JS) (-> легче поддерживать)
Вам не нужно знать ширину по умолчанию элемент (-> более гибким)

Пример:

УС:

.wide { 
    width: 500px; 
}

HTML:

<li onclick="show(this)">...</li>

JS:

function show(elem) { 
    elem.classList.toggle('wide'); 
}

DEMO

Посмотрите на MDN documentation regarding classList информацию о поддержке браузера. Вы также можете найти альтернативы в этом замечательном вопросе/ответе об обработке классов CSS по элементам: Change an element's class with JavaScript

Чтобы узнать больше о обработке событий (способы привязки обработчиков событий, информации, доступной внутри обработчиков событий и т. Д.), Посмотрите excellent articles at quirksmode.org.

источник

2014-02-21 06:44:01

Должен ли я определить элемент внутри функции? – AllTheTime1111

'elem' - это параметр функции. Элемент, вызвавший событие, передается как аргумент: 'onclick =" show (this) "'. Конечно, вы также можете использовать свой код ('document.getElementById (« pop ») ...»), но я предположил, что вы хотите получить ссылку на элемент с щелчком в любом случае, и в этом случае мое определение функции более общее и проще. Прочтите статьи quirksmode, они очень хорошо объясняют, как получить доступ к элементу, который вызвал событие, и как это работает. –

Нет, это определенно имеет больше смысла; позволяя мне использовать один и тот же код для нескольких элементов. Спасибо за информацию. – AllTheTime1111

Используйте регулятор

var clickControl = false; 
function show() 
{ 
    if(clickControl) 
    { 
     var elem = document.getElementById("pop").querySelector('li:nth-child(3)'); 
     elem.style.width = "500px"; 
     clickControl = !clickControl; 
    } 
    else 
    { 
     var elem = document.getElementById("pop").querySelector('li:nth-child(3)'); 
     elem.style.width = "200px"; 
     clickControl = !clickControl; 
    } 
}

источник

2014-02-21 06:38:38 vsgoulart

function show() { 
    var elem = document.getElementById("pop").querySelector('li:nth-child(3)'), 
     width = parseInt(elem.style.width, 10); 
    if (width === 500) { 
     elem.style.width = "200px"; 
    } 
    else { 
     elem.style.width = "500px"; 
    } 
}

Хотя, я бы, вероятно, назвать функцию toggle или что-то подобное и не встраивать обработчик щелчка.

источник

2014-02-21 06:38:55

Что делает 'width = parseInt (elem.style.width, 10);' do? – AllTheTime1111

Он превратит строку типа «500px» в число «500». Оттуда вы можете добавить к нему или сделать все, что хотите, как и любое другое число. –

Как изменить событие onclick другим кликом?

ответ

Смежные вопросы