Question

我想复制＆＃34;投票栏 - 容器＆＃34;带有jQuery功能的div。但是，因为每个副本带有相同的＆＃34; .classes＆＃34; （我的jQuery选择器以这些类为目标），jQuery在每个副本上执行，而不管是哪个＆＃34;投票栏 - 容器＆＃34; div正在与之互动。

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

我相信答案取决于我选择的选择器，因为我知道我不需要为每个重复的HTML元素复制我的jQuery代码，使用不同的＆＃34; ID＆＃34;。

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

OR

这是我的HTML＆amp; 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）

Esc

而不是

C-h

当你要求（*我想要的只是在与之交互的元素上执行jQuery事件时）..你的代码应该是这样的......你需要使用 .closest（）以及＆gt;＆gt;得到与upvote div相关的downvote div并反转

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

DEMO

注意：这个答案取决于您的要求..您需要稍微努力才能达到您想要的风格

Answer 2

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

首先，由于您有多个与它们相关联的元素，因此需要根据最接近upvote的元素的现有upvote值来进行此迭代和它的迭代。请注意以下内容：

$(".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 + "%");
    }       
});

这将允许您正确选择与单击的upvote元素最相关的元素。为downvote函数做类似的事情。

单个jQuery函数用于操作具有相同＆＃34; .class＆＃34;的元素。独立地

2 个答案: