Jquery Need Help - Изменение содержимого при нажатии на ссылку

Question

Jquery Need Help - Изменение содержимого при нажатии на ссылку

0

Мне нужна помощь. Я пытаюсь получить ссылку, чтобы изменить отображаемый ответ, когда вы нажимаете на ссылку. Я хочу, чтобы он переключался туда и обратно каждый раз, когда вы нажимаете на него. Я играл с несколькими элементами, но ничего не работает. Я прокомментировал некоторые заметки, чтобы помочь разобраться в том, что я хочу делать. Благодарю!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">


function flipSwitch(){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'block';
    //get the first div into this variable
    //var firstDiv = document.getElementById('first');
    firstDiv.style

    //change it style/display properties from none to block.  Is it visible now when you click the link?
    //firstDiv.
}

</script>
</HEAD>


<BODY>

<div id="home">
<A HREF="javascript:flipSwitch()">Let see if we can get this to work?</A>
</div>

<div id="first" style="DISPLAY: none;">This is a test...</div>

<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>

</BODY>

user3632693 13 май 2014, в 15:45

Источник

1

Почему заглавные буквы в HTML?
laaposto 13 май 2014, в 13:33
0

<a href="#" onclick="flipSwitch()">Let's see if we can get this to work?</a>
Scott Murphy 13 май 2014, в 13:36

Теги:

javascript

jquery

4 ответа

Ещё вопросы

<a href="#" onclick="flipSwitch()">Let's see if we can get this to work?</a>

Naveen Chandra Tiwari · Answer 1 · 2014-05-13T12-57-00.000Z

Попробуйте эту логику. Возьмите глобальную переменную и установите ее значение в 1.

  <script type="text/javascript">
  var countClick=1;

  function flipSwitch(){
   if(countClick%2==0){
  document.getElementById('first').style.display = 'block';
  document.getElementById('second').style.display = 'none';
  }
  else{
   document.getElementById('first').style.display = 'none';
   document.getElementById('second').style.display = 'block';

  }
 countClick++;
  }

 </script>

Также, пожалуйста, измените свой html следующим html:

<body>

<div id="home">
 <a href="javascript:void(0);" onclick="flipSwitch()">Let see if we can get this to work?</a>
</div>

 <div id="first" style="display: none;">This is a test...</div>

 <div id="second" style="display: none;">of the emergency broadcast system</div>

</body>

Jamie Barker · Answer 2 · 2014-05-13T12-02-00.000Z

Подобно MBottens, но с некоторым простым JQuery:

$('#home > a').on('click', function(e) {
    e.preventDefault()
    $('#first').toggle();
    $('#second').toggle();
});

rescuecreative · Answer 3 · 2014-05-13T12-00-00.000Z

Я согласен, что все кепки html странны, но для того, чтобы сделать это быстро, я скопирую/вставлю код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">

    function flipSwitch(){
        // first and foremost, you're using jQuery so let use jquery
        if ($('#first').is(':hidden')) {
          $('#first').show();
          $('#second').hide();
        } else {
          $('#first').hide();
          $('#second').show();
        }
    }

    // next, let get your javascript OUT of the html
    $(document).ready(function () {
        // when the document has loaded, attach our function as a
        // click handler to the link
        $('#my_switch').on('click', flipSwitch);
    });

</script>
</HEAD>
<BODY>

    <div id="home">
        <a id="my_switch">Let see if we can get this to work?</a>
    </div>

    <div id="first" style="DISPLAY: none;">This is a test...</div>
    <div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>

</BODY>

bottens · Answer 4 · 2014-05-13T11-08-00.000Z

Это хорошая практика для перемещения javascript из вашего HTML. Ниже приведен пример переключения свойства отображения CSS в javascript.

Сценарий: http://jsfiddle.net/LdPfS/

var link = document.querySelector("#home > a")

link.addEventListener("click", function(e) {
    e.preventDefault()

    var firstDiv = document.getElementById('first'),
        secondDiv = document.getElementById('second'),
        toggle = firstDiv.style.display === "none" ? "block" : "none"

        /* toggle = firstDiv.style.display === "none" ? "block" : "none"
         * Read as
         * if ( firstDiv.style.display === "none" ) {
         *     toggle = "block"
         * else {
         *     toggle = "none"
         * }
         */

    firstDiv.style.display = toggle
    secondDiv.style.display = toggle
})