上一個按鈕的jQuery

我在我的頁面這兩個元素：上一個按鈕的jQuery

<input type='button' value="undo" style="display:none" onClick = "undoFunction()"/> 
<input type='checkbox' onClick = "ajaxFunction()"/>

我想當過我點擊複選框，取消按鈕會出現。我已經使用jquery，但有些錯誤。它不起作用。

這是我的全部功能：

function ajaxFunction(){ 
     $(document).ready(function(){ 
     $("form input:checkbox").click(function() { 
      var hrefAdd = ($(this).nextAll('a').attr("href")); 
      var word = savequery(); 
      var ajaxRequest; // The variable that makes Ajax possible! 
      try{ 
       // Opera 8.0+, Firefox, Safari 
       ajaxRequest = new XMLHttpRequest(); 
       } catch (e){ 
        // Internet Explorer Browsers 
        try{ 
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
         } catch (e) { 
          try{ 
           ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
           } catch (e){ 
            // Something went wrong 
            alert("Your browser broke!"); 

            return false; 
            } 
           } 
         } 

       var queryString ="?Word=" + word + "&Link_Add=" + hrefAdd ; 
        ajaxRequest.open("GET","ajax_request.php" + queryString , true); 
        $(this).prev('input[type="button"]').show(); 
        $(this).css("display","none"); 


       ajaxRequest.send(null); 
       }); 
     }); 
}

來源

2011-10-03 nasi

你真的不需要包裝你的JS代碼到'函數ajaxFunction（）{} '，你也不需要和複選框元素中的'onClick'屬性。 '$（「form input：checkbox」）。click（）'爲你完成整個元素的綁定。 – akloboucnik

另一個提示：您可以使用[jQuery.get]（http://api.jquery.com/jQuery.get/）函數更簡單地使您的AJAX GET調用「ajax_request.php」更加簡單。 – akloboucnik

它應該是這樣的：的

$(this).prev('input[type="button"]').show()

的=代替:

和一個小「更好的做法」注：

更好的方法是定義你的事件處理程序非強制性的方式（在一個domready中回調的jQuery的情況下：

$(function() { 
    $('input[type="checkbox"]').click(function() { 
     $(this).prev('input[type="button"]').show(); 
    }); 
});

同樣的，點擊事件按鈕輸入。

UPDATE：

你的整個JS代碼應類似於這個（因爲我已經寫在註釋你原來的問題（當然包裹在<script type="text/javascript"></script>標籤） - 你不需要包裝一個domready中回調在另一功能中）

$(document).ready(function(){ 
    $("form input:checkbox").click(function() { 
     var hrefAdd = ($(this).nextAll('a').attr("href")); 
     var word = savequery(); 
     var data = {"Word": word, "Link_Add": hrefAdd}; 

     $.get('ajax_request.php', data); 
     $(this).prev('input[type="button"]').show(); 
     $(this).css("display","none"); 
    }); 
});

我省略了例如從ajax調用中成功回調，因爲您的原始代碼中沒有一個，但是您可以在Jquery.get文檔中找到全部內容。

更新2：

好吧，這裏是完整的網頁，其中你想要做什麼（除了它可能Ajax調用後視吐出一個404錯誤，ajax_request.php是否存在）。這對你有用嗎？

<html> 
    <head><title>test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
    <script type="text/javascript" encoding="utf-8"> 
     $(function() { 
      $("form input:checkbox").click(function() { 
       var hrefAdd = ($(this).nextAll('a').attr("href")); 
       var word = savequery(); 
       var data = {"Word": word, "Link_Add": hrefAdd}; 

       $.get('ajax_request.php', data); 
       $(this).prev('input[type="button"]').show(); 
       $(this).css("display","none"); 
      }); 
     }); 
     // just a mock function to make a call to it in checkbox click callback work 
     var savequery = function() { 
     return "foo"; 
     } 
    </script> 
    <form action="" method="get"> 
     <input type="button" value="undo" style="display:none"/> 
     <input type="checkbox" /> 
     <a href="http://example.com/#foo">test link to fill hrefAdd</a> 
    </form> 
    </body> 
</html>

來源

2011-10-03 05:35:46 akloboucnik

是的。這就像你在說什麼。我只是在這裏放了一部分代碼。「=」也不起作用 – nasi

我也錯過了你有無效的HTML標記（在按鈕輸入的onClick =「undoFunction（）」中沒有關閉''''這不是問題嗎？ – akloboucnik

沒有 – nasi

這似乎適用於我。

<input type='button' value="undo" style="display:none" /> 
<input type='checkbox' class='cb_button' /> 

<script type='text/javascript'> 
    $(document).ready(function() { 
    $(".cb_button").click(function() { 
     $(this).prev(":button").show(); 
    }); 
    }); 
</script>

document.ready函數就像頁面的加載。在那裏，我們說，找到類'cb_button'的所有複選框，並將其設置爲使其click事件執行此功能。

在該函數中，它告訴它獲取具有type ='按鈕的特定複選框的先前兄弟。

如果你想切換，您可以檢查，看看它是否與.attr檢查（「檢查」）：

if ($(this).attr('checked')) { 
    $(this).prev(":button").show() 
} else { 
    $(this).prev(":button").hide() 
}

希望這有助於。

來源

2011-10-03 05:56:38

請給我們顯示您的完整代碼，由akloboucnik發佈的答案似乎是正確的。您可以檢查它運行在這裏

http://jsfiddle.net/tDDV2/

檢查你的JS日誌，看看你能不能找出問題

來源

2011-10-03 06:13:11

感謝您訪問本網站。我將我的代碼添加到帖子中。你能看看嗎？我在那個網站上檢查了我的代碼，並意識到，當我把函數放入「function ajaxFunction（）{」它不起作用。 – nasi

上一個按鈕的jQuery

回答

相關問題