上一个按钮的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

回答

相关问题