Question

我有一个特定的问题。我有一个网页，可以选择要显示的结果数量。我用一些按钮和活动/选择量的范围做了这个。现在我需要为此实现ajax请求，因此我需要找出当前选择的数量，并且在客户端选择了另一个数量后我需要更新HTML部分，因此HTML部分始终突出显示当前的数量。我的问题是：如何获取当前数据ID，以及如何在按钮处于活动状态时仅替换此HTML行。

我的HTML：

<div class="pagination">
    <span>Show orders</span>
    <a href="" data-id="25">25</a>
    <span class="active" data-id="50">50</span>
    <a href="" data-id="75">75</a>
    <a href="" data-id="100">100</a>
    <a href="" data-id="125">125</a>
    <a href="" data-id="150">150</a>
    <a href="" data-id="1000">All</a>
</div>

我的JQuery猜猜要获得当前金额：

var selectedAmount = $( ".pagination" ).find ( ".active" ).data( "id" );

我的JQuery事件用元素替换按钮，反之亦然：

$('.pagination a').on('click', function(event){
    event.preventDefault();
    // Replace the old highlighted amountbutton with <a href> tag
    // And replace the old <a href> tag with the "highlighted" span button
});

Answer 1

您可以使用 replaceWith ：

之类的内容

$("button").replaceWith( "<a href='#'>Link</a>" );

我不确切地知道你想要替换什么，所以这只是一个例子，如果你提供一个小提琴，我可以帮助你更好。

Answer 2

selectedAmount检索看起来不错。但是你可以简化它：

var selectedAmount = $( ".pagination .active" ).data( "id" );

至于后者：

$('.pagination').on('click', 'a', function(event){
    event.preventDefault();

    // Replace the old highlighted amountbutton with <a href> tag

    $('.pagination .active').replaceWith(
      function() {
        var el = $(this);
        var id = el.data('id');
        var txt = el.text();

        var a = $('<a>').text(txt).data('id', id).attr('href', '#');
        return a;
      }
    );

    // And replace the old <a href> tag with the "highlighted" span button
    var id = $(this).data('id');
    var txt = $(this).text();
    var sp = $('<span class="active"></span>').text(txt).data('id', id);
    $(this).replaceWith(sp);

});

示例：http://codepen.io/paulroub/pen/nkhiD

Answer 3

尝试用事件的目标做这样的事情。

$('.pagination a').on('click', function(event)
{
   event.preventDefault();
   var newAmount= $(event.target).data('id'); 
   var selectedAmount =$( ".pagination .active" ).data( "id" );
 //You should be able to use replacewith or Append to figure out the rest


});

JQuery找到HTML项目并替换

3 个答案: