Javascript 特异性(仅响应单击的项目)

Question

我对 Javascript 非常陌生，正在寻找一种方法让我的代码仅响应列表中单击的项目。 (完整的 JSFiddle 在这里: http://jsfiddle.net/5cjPF/ ，尽管由于某种原因按钮没有响应......)

对于以下功能，每个功能仅适用于某个单击的项目，但是，现在只有每个功能引用的第一个项目正在响应。我的一个 friend 建议为每个函数创建一个类，但老实说我不知道​​从哪里开始，并且非常感谢朝着正确的方向插入!

<script type="text/javascript">
    var submitcount = 0;
    function arrow() {
        if (submitcount == 0 || submitcount % 2 == 0) {
            var extension = document.getElementById('one');
            extension.insertAdjacentHTML('beforeend', '<div id="before-two"><div id="two"><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>synonyms</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>beast</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button></div><p><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>antonyms</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtyTag(1)"></button><!----><button type="button" class="tag" id=tag>gentle</button><!----><button type="button" class="right" onclick="modify_qtyTag(0)"></button></div></p></div></div></div>');
        }
        else if(document.getElementById('two')) {
            var deleted = document.getElementById('before-two');
            deleted.remove(deleted.selectedIndex);  
        }
        submitcount += 1;
    };

    var upvotes = 0;
    var votes = 0;

    function modify_qty(val) {
        var qty = document.getElementById('qty').value;

        votes += 1;
        upvotes += val;

        var percent = Math.round((upvotes / votes) * 100);

        document.getElementById('qty').value = percent;
    }

    var upvotesTag = 0;
    var votesTag = 0;

    function modify_qtyTag(val) {
        var extension = document.getElementById('tag');

        votes += 1;
        upvotes += val;

        var percent = Math.round((upvotes / votes) * 100);

        var allThings = percent + "%," + " 100%," + " 100%," + " 100%;";

        extension.style.backgroundSize = allThings;
        extension.style.backgroundSize = "100%";
        extension.style.backgroundSize = percent + "%, 100%, 100%, 100%";
    }
</script>

Answer 1

JS 应该是:

function modify_qtyTag(val, tagid) {
    var extension = document.getElementById(tagid);
    var votes = parseInt(extension.getAttribute("data-votes"), 10) + 1;
    var upvotes = parseInt(extension.getAttribute("data-upvotes"), 10) + val;
    var percent = Math.round((upvotes / votes) * 100);
    var allThings = percent + "%," + " 100%," + " 100%," + " 100%;";
    extension.style.backgroundSize = allThings;
    extension.setAttribute('data-votes', votes);
    extension.setAttribute('data-upvotes', upvotes);
}

HTML 类似于:

<button type="button" class="left" onclick="modify_qtyTag(1, 'tag1')"></button>
<button type="button" class="tag" id="tag1" data-votes="0" data-upvotes="0">synonyms</button>

这会向函数添加一个参数，告诉它要更新哪个标签。并且它没有使用全局变量来表示投票和赞成票，而是将其存储在标签元素的数据属性中，以便每个人都可以拥有自己的百分比。