當我在jQuery中使用.toggle（）方法時，代碼無法正常工作

所以我有這個問題，使用toggle（）。問題是，當我使用切換而不是在重新加載後單擊塊頁面離開頁面時，我甚至無法切換塊。這裏是代碼當我在jQuery中使用.toggle（）方法時，代碼無法正常工作

如果我使用.click（）代替 - 它可以工作，但是如果我編寫「切換」，只要我重新加載頁面而不讓我自己切換，塊就會滑開。

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Email input page</title> 
 
    <link href="css/styles.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <script type="text/javascript" src="js/scripts.js"> 
 
    $(document).ready(function($) { 
 
     $('#newdiv').on('toggle', function() { 
 
     $(this).css({ 
 
      'background': 'black', 
 
      'color': 'white' 
 
     }); 
 
     }, function() { 
 
     $(this).css({ 
 
      'background': 'green', 
 
      'color': 'red' 
 
     }); 
 
     /!* Stuff to do every *even* time the element is clicked *!/ 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <input value="enter your email:" type="" name="" /> 
 

 
    <div id="newdiv"> 
 
    test div for test something 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-10-25 Slava

'切換（FN，FN）'在1.8已被廢棄，再後來取出1.9 – Satpal

我發現這裏有兩個問題：

1）不能有相同的標籤<script></script> 我刪除<script src="js/scripts.js">到<script>

下一個腳本源代碼和腳本代碼2）您可以聽<details>上的切換事件而不是<div>

我希望這會幫助你。請參見下面的代碼片段：

<!DOCTYPE HTML> 
 

 
    <head> 
 
<html> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    
 
     <meta charset="UTF-8"/> 
 
     <title>Email input page</title> 
 
     <link href="css/styles.css" rel="stylesheet" type="text/css"/> 
 
     
 
     <script type="text/javascript" > 
 
$(document).ready(function($) { 
 
$('#newdiv').on('toggle', function() { 
 
     $(this).css({ 
 
      'background': 'black', 
 
      'color': 'white' 
 
     }); 
 
    }, function() { 
 
     $(this).css({ 
 
     'background': 'green', 
 
     'color' : 'red' 
 
     });/!* Stuff to do every *even* time the element is clicked *!/ 
 
    }); 
 
}); 
 
</script> 
 
    </head> 
 
    <body> 
 
    <input value="enter your email:" type="" name=""/> 
 

 
      <details id="newdiv"> 
 
     test div for test something 
 
    </details> 
 
    </body> 
 
</html>

來源

2016-10-25 10:57:56 TSR

是啊，謝謝，但不完全是我想要的。我實際上已經將我的.js文件從html中分離出來，所以這只是我將代碼合併到一起的一種粘貼方式。 – Slava

我想要的是多次切換bg和字體顏色，就像我單擊一次 - 塊塗黑色，第二次點擊 - 塊是綠色的，等等。我甚至可以使用點擊 - 黑色，點擊奇數 - 綠色，但想使用切換方法。它不是隱藏一些酒吧，只是改變它的顏色。 – Slava

這是另一個例子，它不能正常工作 – Slava

Here is another example of code with toggle, that does not work. the thing is that it has to hide/show the form below the block "formHide", changing the text in it the block, but insted with method .toggle() written to code the block just hides on the reload not giving to toggle itself. 


<!DOCTYPE HTML> 

     <head> 
    <html> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


      <meta charset="UTF-8"/> 
      <title>Email input page</title> 
      <link href="css/styles.css" rel="stylesheet" type="text/css"/> 

      <script type="text/javascript" > 
    $('#formHide').toggle(function(){ 
      $('#my_form').fadeOut(10000); 
      $(this).text('expand form'); 
     }, function() { 
      $('#my_form').fadeIn(5000); 
      $(this).text('colapse form'); 
     }); 
    </script> 
     </head> 
     <body> 
     <div id="formHide">colapse form</div> 

        <form action="form.php" id="my_form"> 
         <div id="bigform"> 
          <fieldset> 

           <div id="div_form_ 1"> 
            <fieldset id="innerfieldset"> 
             <legend>addition options</legend> 
             <p><strong>You need?</strong></p> 
             <div id="format"> 
              <input type="checkbox" value="sh" name="dop_oprions" id="shlem" /> 
              <label for="shlem">Helm</label> 
              <input type="checkbox" value="bag" name="dop_oprions" id="bag" /> 
              <label for="bag">Backpack</label> 
              <input type="checkbox" value="od" name="dop_oprions" id="od" /> 
              <label for="od">Wear</label> 
             </div> 
             <p><strong>insurance</strong></p> 
             <div id="radio"> 
              <input type="radio" id="inch_yes" value="yes" name="inch" /> 
              <label for="inch">Yes</label> 
              <input type="radio" id="inch_no" value="no" name="inch" /> 
              <label for="inch">No</label> 
             </div> 
            </fieldset> 
            <input type="submit" value="Send" id="my_button" /> 
           </div> 

           <div id="div_form_2"> 
            <span>Model:</span> 
            <select name="moto" size="1" id="motoSelect"> 
             <option value="1">FIrst value(options)</option> 
             <option value="2">Second value(options)</option> 
             <option value="3">Third value(options)</option> 
             <option value="4">Fourth value(options)</option> 
            </select> 
            <span>Days:</span> 
            <select name="days" size="1" id="daysSelect"> 
             <option value="1">1</option> 
             <option value="2">2</option> 
            </select> 
            <p><strong>Your email:</strong></p> 
            <input type="text" id="email" value="Example: [email protected]" /> 
            <p><strong>Your desires:</strong></p> 
            <textarea cols="45" rows="2" id="mytextarea"></textarea> 
           </div> 
          </fieldset> 
         </div> 
        </form> 
     </body> 
    </html>

來源

2016-10-25 13:55:37 Slava

當我在jQuery中使用.toggle（）方法時，代碼無法正常工作

回答

相關問題