我的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");
});
当我尝试在每个单独的类末尾添加“2016”时,我的代码将所有类更改为“Jan2016”。我一直在使用$ .each()函数来解决这个问题,但我无法理解如何正确使用它。
更新:有人删除了这个答案,但这也有效;
$("#Year2016").click(function() {
$('.Month a').each(function(){
$(this).attr("class", $(this).attr('class') + "2016");
});
});
答案 0 :(得分:0)
我认为他想把这一年追加到月底。在那种情况下
$(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
答案 1 :(得分:0)
这应该可以解决问题......如果您还需要其他信息,请告诉我?
// 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);
}
}
答案 2 :(得分:0)
您可以使用attr
's function为集合中的每个元素设置类,例如:
$('.Month a').attr('class', function(idx, val) {
return val + '2016';
});
注意:如果您有多个班级,2016
将被附加到最后一个班级,例如:
<a class="Jan example"> --> <a class="Jan example2016">
答案 3 :(得分:0)
根据您的描述判断您当前的方法似乎相当复杂。我个人会用一个简单的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]);
}
}
});
&#13;
a {
margin: 0 5px;
}
&#13;
<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>
&#13;