单个 jQuery 函数独立操作具有相同“.class”的元素

Question

我想复制带有 jQuery 功能的 "voting-bar-container" div。但是，因为每个重复项都带有相同的“.类”（而我的 jQuery 选择器针对那些类），所以 jQuery 会在每个重复项上执行，而不管哪个"voting-bar-container" div 正在与 div 互动。

我希望 jQuery 事件仅在与之交互的元素上执行。

我相信答案在于我对选择器的选择，因为我知道我不需要为每个具有不同 "ID's" 的重复 HTML 元素复制我的 jQuery 代码。

https://jsfiddle.net/STEEZENS/aqd87b2d/

或

这是我的 HTML & jQuery:

<div class="voting-bar-container">

    <button class="upvote">
        <span class="upvote-counter">0</span>
    </button>

    <div class="vote-meter">
        <div class="upvotes"></div>
        <div class="downvotes"></div>
    </div>

    <button class="downvote">
        <span class="downvote-counter">0</span>
    </button>

</div>

jQuery:

$(document).ready(function () {

var $downvoteCount = 0;
var $upvoteCount = 0;

$(".upvote").click(function () {
    $upvoteCount++;
    $(".upvote-counter").text(" " + $upvoteCount);
    var $totalVoteCount = $upvoteCount + $downvoteCount;
    var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
    var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
    if (($upvoteProportion + $downvoteProportion) > 100) {
        $(".upvotes").width(($upvoteProportion - 0.5) + "%");
        $(".downvotes").width(($downvoteProportion - 0.5) + "%");
    } else {
        $(".upvotes").width($upvoteProportion + "%");
        $(".downvotes").width($downvoteProportion + "%");
    }
});

$(".downvote").click(function () {
    $downvoteCount++;
    $(".downvote-counter").text(" " + $downvoteCount);
    var $totalVoteCount = $upvoteCount + $downvoteCount;
    var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
    var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
    if (($upvoteProportion + $downvoteProportion) > 100) {
        $(".upvotes").width(($upvoteProportion - 0.5) + "%");
        $(".downvotes").width(($downvoteProportion - 0.5) + "%");
    } else {
        $(".upvotes").width($upvoteProportion + "%");
        $(".downvotes").width($downvoteProportion + "%");
    }
});
});

Answer 1

你需要使用 $(this)

$(this).find(".upvote-counter")

而不是

$(".upvote-counter")

当您要求时（*我想要的是 jQuery 事件仅在与之交互的元素上执行）..您的代码应该是这样的..您将需要使用.closest() 以及 >> 获得与赞成票 div 和反转

相关的反对票 div

   $(document).ready(function () {

    var $downvoteCount = 0;
    var $upvoteCount = 0;

    $(".upvote").click(function () {
        $upvoteCount++;
        $(this).find(".upvote-counter").text(" " + $upvoteCount);
        var $totalVoteCount = $upvoteCount + $downvoteCount;
        var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
        var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
        if (($upvoteProportion + $downvoteProportion) > 100) {
            $(this).width(($upvoteProportion - 0.5) + "%");
            $(this).closest('voting-bar-container').find(".downvotes").width(($downvoteProportion - 0.5) + "%");
        } else {
            $(this).width($upvoteProportion + "%");
            $(this).closest('voting-bar-container').width($downvoteProportion + "%");
        }
    });

    $(".downvote").click(function () {
        $downvoteCount++;
        $(this).find(".downvote-counter").text(" " + $downvoteCount);
        var $totalVoteCount = $upvoteCount + $downvoteCount;
        var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
        var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);
        if (($upvoteProportion + $downvoteProportion) > 100) {
            $(this).closest('voting-bar-container').find(".upvotes").width(($upvoteProportion - 0.5) + "%");
            $(this).width(($downvoteProportion - 0.5) + "%");
        } else {
            $(this).closest('voting-bar-container').find(".upvotes").width($upvoteProportion + "%");
            $(this).width($downvoteProportion + "%");
        }
    });
});

DEMO

注意：此答案应您的要求而定。您需要稍作修改才能达到您想要的风格

Answer 2

您需要遍历 DOM 以查找与被单击元素相关的相关元素，而不是全局查找。

首先，由于您有多个元素关联了赞成票，因此需要根据最接近赞成票的元素的现有赞成票值来计算此值及其迭代值。请注意以下内容：

$(".upvote").click(function () {
    var upvote_counter = $(this).find('span'),
        downvote_counter = $(this).parent().find('.downvote-counter'),
        upvotes = $(this).parent().find('.upvotes'),
        downvotes = $(this).parent().find('.downvotes'),
        $upvoteCount = upvote_counter.text(),
        $downvoteCount = downvote_counter.text();

    $upvoteCount++;

    upvote_counter.text($upvoteCount);

    var $totalVoteCount = $upvoteCount + $downvoteCount;
    var $upvoteProportion = Math.round(($upvoteCount / $totalVoteCount) * 100);
    var $downvoteProportion = Math.round(($downvoteCount / $totalVoteCount) * 100);

    if (($upvoteProportion + $downvoteProportion) > 100) {
        upvotes.width(($upvoteProportion - 0.5) + "%");
        downvotes..width(($downvoteProportion - 0.5) + "%");
    } else {
        upvotes.width($upvoteProportion + "%");
        downvotes.width($downvoteProportion + "%");
    }       
});

这将使您能够正确地 select 与所单击的 upvote 元素关联最密切的元素。对 downvote 功能做类似的事情。

单个 jQuery 函数独立操作具有相同“.class”的元素

Single jQuery function to manipulate elements with the same ".class" independently

html

javascript

css

jquery

jquery-selectors