我编写了一个程序,在单击时突出显示选定的按钮,并在单击另一个按钮时取消突出显示。它正在运行,但我需要减少它的重复性(使用 maybe 循环)。
var txt = $(".txt");
var xls = $(".xls");
var jpg = $(".jpg");
var png = $(".png");
var pdf = $(".pdf");
var mp3 = $(".mp3");
var mp4 = $(".mp4");
var gif = $(".gif");
var flac = $(".flac");
var html = $(".html");
var js = $(".js");
var aac = $(".aac");
var ai = $(".ai");
var avi = $(".avi");
var psd = $(".psd");
var tiff = $(".tiff");
var fileTypes = [txt, xls, jpg, png, pdf, mp3, mp4, gif, flac, html, js, aac, ai, avi, psd, tiff];
$(fileTypes[0]).click( function() {
for(i=0; i<fileTypes.length; i++)
{
fileTypes[i].removeClass("selected");
fileTypes[i].addClass("not-selected");
}
fileTypes[0].removeClass("not-selected");
fileTypes[0].addClass("selected");
});
$(fileTypes[1]).click( function() {
for(i=0; i<fileTypes.length; i++)
{
fileTypes[i].removeClass("selected");
fileTypes[i].addClass("not-selected");
}
fileTypes[1].removeClass("not-selected");
fileTypes[1].addClass("selected");
});
$(fileTypes[2]).click( function() {
for(i=0; i<fileTypes.length; i++)
{
fileTypes[i].removeClass("selected");
fileTypes[i].addClass("not-selected");
}
fileTypes[2].removeClass("not-selected");
fileTypes[2].addClass("selected");
}); // It does this 16 times, the length of the fileTypes array
我曾尝试使用for循环来解决这个问题,但一直没有成功。 请帮忙。谢谢。
最佳答案
也许您可以通过执行以下操作来简化脚本:
var extensions = ['.txt',
'.xls',
'.jpg',
'.png',
'.pdf',
'.mp3',
'.mp4',
'.gif',
'.flac',
'.html',
'.js',
'.aac',
'.ai',
'.avi',
'.psd',
'.tiff']
// Create a selector that selects all classes in
// the extensions array
var selector = extensions.join(',');
// Assign a click handler to each element in the
// selected string
$(selector).click(function() {
// When clicked, remove the selected
// class, and add not-selected to all
// elements in the selector
$(selector)
.removeClass('selected')
.addClass('not-selected')
// For this item, remove not-selected
// class and add selected class
$(this)
.removeClass('not-selected')
.addClass('selected')
})
.selected {
background:red;
}
.not-selected {
background:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="txt">txt</button>
<button class="xls">xls</button>
<button class="jpg">jpg</button>
<button class="png">png</button>
<button class="pdf">pdf</button>
<button class="mp3">mp3</button>
<button class="mp4">mp4</button>
<button class="gif">gif</button>
<button class="flac">flac</button>
<button class="html">html</button>
<button class="js">js</button>
<button class="aac">aac</button>
<button class="ai">ai</button>
<button class="avi">avi</button>
<button class="psd">psd</button>
<button class="tiff">tiff</button>
关于javascript - 循环创建变量,函数/数组循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53163902/