2016-03-02 6 views
0

Были попытки показать скрытие DIV на странице моего веб-сайта.Событие Jquery click не запускается

Он отлично работал с простым javascript, но заметил, что он не работает при моделировании на мобильных устройствах. После небольшого исследования я изменил свой код на следующий, есть ли что-то в этом плохого?

<script> 
    $(document).ready(function() { 
     var portfolioDiv = document.getElementById('portfolio'); 
     var resultsDiv = document.getElementById('results'); 

     var portfolioBtn = document.getElementById('RenderPortfolio_Btn'); 
     var resultsBtn = document.getElementById('RenderResults_Btn'); 
     //portfolioBtn.onclick = function() resultsBtn.onclick = function() 
     $('#portfolioBtn').on('click touchstart', function() { 
      resultsDiv.setAttribute('class', 'col-md-9 hidden'); 
      portfolioDiv.setAttribute('class', 'col-md-9 visible'); 
     }); 

     $('#resultsBtn').on('click touchstart', function() { 
      portfolioDiv.setAttribute('class', 'col-md-9 hidden'); 
      resultsDiv.setAttribute('class', 'col-md-9 visible'); 
     }); 
    }); 
</script> 

Вот мой стек NavBar, где два варианта действуют как кнопки

<div class="col-md-3 col-sm-12 col-xs-12"> 
    <br /> 
    <ul class="nav nav-stacked"> 
     <li style="background-color: lightgreen ; color:black;font-weight:bold"><a href="#" id="RenderPortfolio_Btn">Introduction</a> 
     </li> 
     <li style="background-color: lightgreen; color:black;font-weight:bold"><a href="#" id="RenderResults_Btn">Key Achievements</a> 
     </li> 
    </ul> 
</div> 
+0

'Ид = "RenderPortfolio_Btn"' = '$ (» #portfolioBtn ') ' –

+0

жаль, что я вас не понял, вы хотите сказать, что мне нужно заменить document.getElementById (' RenderPortfolio_Btn '); с $ ('RenderPortfolio_Btn')? –

+1

Нет, вы создали переменную 'portfolioBtn', которая ссылается на элемент. Если вы хотите, чтобы jQuery использовал эту переменную, вы не должны заключать ее с кавычками с хешем - это способ использования jQuery для выбора элемента по идентификатору. Вам либо нужно использовать '$ (" # RenderPortfolio_Btn ")' или '$ (portfolioBtn)'. Одна из основных моментов использования jQuery заключается в том, что вы можете исключить «var variable = document.getElementById' crap, и вы можете выбрать элемент (ы) и выполнить несколько операций или применить фильтры или обходы в одной строке. –

ответ

1

Вы смешиваете переменные, ссылающиеся на элементы с селекторами jQuery, которые выбирают по идентификатору. По существу, вы можете удалить следующие строки:

var portfolioBtn = document.getElementById('RenderPortfolio_Btn'); 
var resultsBtn = document.getElementById('RenderResults_Btn'); 

, а затем изменить селекторы JQuery на:

$('#RenderPortfolio_Btn').on('click touchstart', function() { 

и

$('#RenderResults_Btn').on('click touchstart', function() { 
+0

Спасибо за ваше время. Тони, странный случай здесь, когда я удаляю запятую между кликом и touchstart, он начинает работать в браузере, но не работает на мобильной платформе .. я заменил код, как вы сказали –

+1

Я не проверял факты другого ответа - запятые неверны, и я их удалил. http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function –

+0

Я просто настроил то же самое на веб-странице, и я протестировал его на своем телефоне Android и это сработало. Единственное, о чем я могу думать, это то, что эмулятор, который вы используете, не работает, как ожидается. –

1

Ваш код отсутствует запятая между click и touchstart также вы селекторе неверен

$('#RenderPortfolio_Btn').on('click, touchstart', function() { 
      resultsDiv.setAttribute('class', 'col-md-9 hidden'); 
      portfolioDiv.setAttribute('class', 'col-md-9 visible'); 
     }); 
+0

Привет, Спасибо, попробовал добавить разделитель запятой после щелчка, однако проблема все еще сохраняется, нет триггера –

+0

@santhoshkumarB где с id = 'portfolioBtn'? –

+0

Я думаю, что проблема с селектором id –