Question

使用JQuery，还有点新功能，尝试将链接更改为选项的下拉菜单，用户可以选择，并在选择选项后，返回到包含选择文本的超链接

到目前为止，我有：

$("a.timeChange").click(function(e){
    e.preventDefault();
    $stamp = $(this).text();
    $.get("tstampoffsetter.php", { t: $stamp, a: 1 }, function(data){
        alert(data);
        $(this).replaceWith(data);
    });
});
$("#selectTimeStamp").change(function(){
    var i = $("#selectTimeStamp :selected").text();
    $(this).replaceWith("<a href='#'>" + i + "</a>");
});

HTML如下：

<a href='#' class='timeChange'>Mon, 13 Sep 2010 04:20:45 -0700</a>

从AJAX调用返回的数据是：

<select id="selectTimeStamp">
   <option value='1284445245'>Mon, 13 Sep 2010 23:20:45 +1200</option>
   <option value='1284441645'>Mon, 13 Sep 2010 22:20:45 +1100</option>
   <option value='1284438045'>Mon, 13 Sep 2010 21:20:45 +1000</option>
   <option value='1284434445'>Mon, 13 Sep 2010 20:20:45 +0900</option>
   <option value='1284430845'>Mon, 13 Sep 2010 19:20:45 +0800</option>
   <option value='1284427245'>Mon, 13 Sep 2010 18:20:45 +0700</option>
   <option value='1284423645'>Mon, 13 Sep 2010 17:20:45 +0600</option>
   <option value='1284420045'>Mon, 13 Sep 2010 16:20:45 +0500</option>
   <option value='1284416445'>Mon, 13 Sep 2010 15:20:45 +0400</option>
   <option value='1284412845'>Mon, 13 Sep 2010 14:20:45 +0300</option>
   <option value='1284409245'>Mon, 13 Sep 2010 13:20:45 +0200</option>
   <option value='1284405645'>Mon, 13 Sep 2010 12:20:45 +0100</option>
   <option value='1284402045'>Mon, 13 Sep 2010 11:20:45 +0000</option>
   <option value='1284398445'>Mon, 13 Sep 2010 10:20:45 -0100</option>
   <option value='1284394845'>Mon, 13 Sep 2010 09:20:45 -0200</option>
   <option value='1284391245'>Mon, 13 Sep 2010 08:20:45 -0300</option>
   <option value='1284387645'>Mon, 13 Sep 2010 07:20:45 -0400</option>
   <option value='1284384045'>Mon, 13 Sep 2010 06:20:45 -0500</option>
   <option value='1284380445'>Mon, 13 Sep 2010 05:20:45 -0600</option>
   <option SELECTED value='1284376845'>Mon, 13 Sep 2010 04:20:45 -0700</option>
   <option value='1284373245'>Mon, 13 Sep 2010 03:20:45 -0800</option>
   <option value='1284369645'>Mon, 13 Sep 2010 02:20:45 -0900</option>
   <option value='1284366045'>Mon, 13 Sep 2010 01:20:45 -1000</option>
   <option value='1284362445'>Mon, 13 Sep 2010 00:20:45 -1100</option>
</select>

单击链接时，我没有收到任何错误，但链接不会成为下拉列表。我通过FireBug看到GET请求，并且它返回数据，Status 200 OK 44ms。在我点击警报窗口后，我看到没有变化，没有错误。感谢您提供的任何帮助或建议。

Answer 1

这是因为this没有引用$.get()成功回调中的链接（它指的是jQuery ajax对象），你需要保持对你点击的锚的引用，就像这样：

$("a.timeChange").live("click", function(e){
    e.preventDefault();
    var link = $(this), $stamp = link.text();
    $.get("tstampoffsetter.php", { t: $stamp, a: 1 }, function(data){
       link.replaceWith(data);
    });
});
$("#selectTimeStamp").live("change", function(){
    var i = $("#selectTimeStamp :selected").text();
    $(this).replaceWith("<a href='#' class='timeChange'>" + i + "</a>");
});

this更改修复了第一个问题，根据您的评论，第二个问题是绑定到您需要使用.live()的新创建的元素，并且在重新创建链接时确保它具有timeChange类（因此.live()选择器匹配）。

Answer 2

您可以使用live方法，以便事件也会附加到尚不存在的元素上：

$("a.timeChange").live('click', function(e){
    e.preventDefault();
    var $link = $(this)
    $.get("tstampoffsetter.php", { t: $link.text(), a: 1 }, function(data){
        alert(data);
        $link.replaceWith(data);
    });
});
$("#selectTimeStamp").live('change', function(){
    var text = $("#selectTimeStamp :selected").text();
    $(this).replaceWith('<a href="#">' + text + '</a>');
});

使用JQuery在Click事件上将A转换为SELECT

2 个答案: