javascript - 通过大量局部 View 动态更改文本

Question

抱歉，这个标题听起来像是一个菜鸟问题，但我真的不知道任何 JavaScript。

让我解释更多。我正在尝试建立一个声誉系统。所以我有一个向上和向下的按钮，中间有一个数字。因此，当用户按下按钮时，它会禁用该按钮，并从数字中添加或删除 1。

现在更改号码是基本的，我可以发现除了每个人之外的任何地方都告诉我使用 ID。但我不能使用 id，因为它不会是唯一的，因为我多次使用此代码，而且我不知道有多少次。这是按钮的代码

<div class="row">
                <button type="button" class="btn-xs btn-link reputation-buttons" onclick="location.href='@Url.Action("MessageReputationUp", "Forum", new { groupId = Model.GroupId, threadId = Model.ThreadId, messageId = Model.Id })';return false;">
                    <span class="glyphicon glyphicon-arrow-up"></span>
                </button>
                <div> <text id="ReputationCount" style="padding-left:2px;">&nbsp; @Model.Reputation.ToString()</text></div>
                <button type="button" class="btn-xs btn-link reputation-buttons" onclick="location.href='@Url.Action("MessageReputationDown", "Forum", new { groupId = Model.GroupId, threadId = Model.ThreadId, messageId = Model.Id })';return false;">
                    <span class="glyphicon glyphicon-arrow-down"></span>
                </button>
            </div>

因此，当我按下向上键时，id = 信誉计数器的文本需要更改。现在事情变得有点复杂了。一旦我按下按钮，该按钮就需要禁用，但是当您按下该按钮时，需要重新启用。但如果我能看到解决这个问题的基本示例，我就可以自己想出。

Answer 1

您可以使用javascript classes 。类的行为有点像 id，但针对 N 个元素。

1. 将每个投票结构封装在一个 div 中。

2. 当upvoting/downvoting时，获取内部div的当前文本，将其转换为整数，加或减1并用更新后的值更改文本。您可以启用/禁用按钮或执行任何您想要执行的操作。

   $(document).on('click', '.votes_manager', function() {
       var elem = $(this).parent().children('.displayer');
       var value = parseInt(elem.text());
       if ($(this).hasClass('increase')) {
         ++value;
       }
       else {
         --value;
       }
       elem.text(value);
   });
   

检查这个JSFiddle .

PS:该解决方案使用 jQuery .