首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >JS:计数器减少,在hide()

JS:计数器减少,在hide()
EN

Stack Overflow用户
提问于 2010-10-30 17:32:51
回答 5查看 459关注 0票数 0

如果我有一个正常的

代码语言:javascript
复制
 <?php echo "Today (".mysql_num_rows($query)."); ?>

如果有10行,结果就是Today (10)。

现在,在这个计数器下,我有一个while()函数,它输出<tr>中的所有行。

在tr内的<td>中,我有这个delete按钮,它隐藏了最近的'tr‘。

当您隐藏'tr‘时,我如何才能将Today(10)减少到Today(9)?

--

我认为使用当前计数器(mysql_num_rows)是不可能的,但如果你计算一下Today()中有多少个'tr‘,你可以做一些减少的事情,但我不知道怎么做。虽然这只是一个想法..

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2010-10-30 17:41:54

你可以这样做:

代码语言:javascript
复制
$('.deleteButton').click(function() {
   var curn = parseInt($('.counter').text(), 10);
   if(curn - 1 >= 0)
      $('.counter').text(curn - 1); 
});

把你的回声改成

代码语言:javascript
复制
 <?php echo "Today (<span class='counter'>".mysql_num_rows($query)."</span>)"; ?>
票数 1
EN

Stack Overflow用户

发布于 2010-10-30 17:44:23

相应地修改您的PHP:

代码语言:javascript
复制
<?php echo 'Today (<span class="counter">' . mysql_num_rows($query) . '</span>)'; ?>

在你的delete按钮上有类似这样的东西:

代码语言:javascript
复制
$('#theTable').delegate('button.delete', 'click', function (event) {
    $(this).closest('tr').slideUp();

    $('span.counter').text(function (index, val) {
        return (parseInt(val, 10) - 1);
    });

    event.preventDefault();
});

注意delegate的使用:它比为每个delete按钮bind一个事件处理程序要高效得多。

您必须相应地更改表的选择器和delete按钮。

票数 2
EN

Stack Overflow用户

发布于 2010-10-30 17:42:01

将数字换行,以便您可以轻松地选择:

代码语言:javascript
复制
<?php echo 'Today (<span id="number">'.mysql_num_rows($query).'</span>)'; ?>

然后当单击删除按钮时:

代码语言:javascript
复制
// Get the number element once
var num = $('#number');

// Set an onclick event on your button
$('.delete').click(function(){

    // Find the closest table row and remove it
    $(this).closest( 'tr' ).remove();

    // num.text() will get the text inside the number element
    // parseInt is used to convert it from string to int
    // subtract 1 to update the number
    var newNumber = parseInt( num.text(), 10 ) - 1;

    // And set the new number text
    num.text( newNumber );

    // Stop the default browser action - might cause the page to reload or to scroll
    return false;
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4058059

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档