如何编辑多个 class 个名称？

Question

我的html:

<a id="Year2016">2016</a>

<div class="Month">
        <a class="Jan">Jan</a>
        <a class="Feb">Feb</a>
        <a class="Mar">Mar</a>
        <a class="Apr">Apr</a>
        <a class="May">May</a>
        <a class="Jun">Jun</a>
        <a class="Jul">Jul</a>
        <a class="Aug">Aug</a>
        <a class="Sep">Sep</a>
        <a class="Oct">Oct</a>
        <a class="Nov">Nov</a>
        <a class="Dec">Dec</a>
</div>

我的js：

$("#Year2016").click(function() {
    $('.Month a').attr("class", $('.Month a').attr('class') + "2016");
});

我的代码正在将所有 class 更改为 "Jan2016"，而我试图将“2016”添加到每个人的末尾 class。我一直在弄乱 $.each() 函数来解决这个问题，但我想不通如何正确使用它。

更新：有人删除了这个答案，但这也有效；

$("#Year2016").click(function() {
    $('.Month a').each(function(){ 
        $(this).attr("class", $(this).attr('class') + "2016");
    });
});

Answer 1

我想他想把年份追加到月末。那样的话

$(document).ready(function(){
    $("#Year2016").click(function() {
        $('.Month').children('a').each(function () {
        var newVal = this.text+" 2006";
        this.text = newVal;
        });
    });
});

输出： Jan 2006 Feb 2006 Mar 2006 Apr 2006 May 2006 Jun 2006 Jul 2006 Aug 2006 Sep 2006 Oct 2006 Nov 2006 Dec 2006

Answer 2

这应该可以解决问题...如果您还需要什么，请告诉我？

Here is the JSFiddle Demo

//HTML

<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
    <button onclick="addYear();">2016</button>
    <div id="year">
        <a class="Jan">Jan</a>
        <a class="Feb">Feb</a>
        <a class="Mar">Mar</a>
        <a class="Apr">Apr</a>
        <a class="May">May</a>
        <a class="Jun">Jun</a>
        <a class="Jul">Jul</a>
        <a class="Aug">Aug</a>
        <a class="Sep">Sep</a>
        <a class="Oct">Oct</a>
        <a class="Nov">Nov</a>
        <a class="Dec">Dec</a>
    </div>  
</body>
</html>

//JS (index.js)

function addYear(){
    var year = document.getElementById("year");
    var months = year.children;
    for(var i=0; i < months.length; i++){
        var month = months[i].className;
        var addYear = month.concat("2016");
        months[i].setAttribute("class", addYear);
    }
}

Answer 3

您可以使用attr's function为集合中的每个元素设置class，例如：

$('.Month a').attr('class', function(idx, val) { 
    return val + '2016';
});

Here's a fiddle

注意：如果您有多个 class，2016 将附加到最后一个 class，例如：

<a class="Jan example"> --> <a class="Jan example2016">

Answer 4

从你的描述来看，你目前的做法似乎相当复杂。就我个人而言，我会用一个简单的 MVVM 库来解决整个问题。一个简洁的例子是 Vue.js.
将数据和显示逻辑分开保存可以避免不必要地来回移动信息。

var v = new Vue({
    el: '#vue',
    data: {
        years: [2014, 2015],
        index: 0,
        months: ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"]
    },
    methods: {
        select: function (i) {
            this.index = i;
        },
        foo: function () {
            var i = this.$$.select.selectedIndex;
            alert('get ' + this.months[i] + this.years[this.index]);
        }
    }
});

a {
    margin: 0 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.12/vue.min.js"></script>
<div id="vue">
  <p><a href="#" v-repeat="year: years" v-on="click: select($index)">{{year}}</a></p>
  <select class="links" v-el="select">
    <option v-repeat="month: months">{{month}} {{years[index]}}</option>
  </select>
  <button type="button" v-on="click: foo()">Download</button>
</div>

如何编辑多个 class 个名称？

How do I edit multiple class names?

html

javascript

iteration

loops

class

Here's a fiddle