循环创建变量，函数/数组循环

Question

我编写了一个程序，当点击按钮时可以将其高亮显示，当另一个按钮被点击时取消高亮。它是有效的，但我需要使它更少重复（可能使用循环）。

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循环解决这个问题，但是一直没有成功。请帮忙，谢谢。

- JavaScript Coder

Answer 1

也许你可以通过以下方式简化你的脚本：

也许您可以简化您的脚本，采取以下方式：

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>

- Dacre Denny

---

太慢了，有点遗憾 ;) - slider

@slider 你是不是要回答？ - Dacre Denny

是的，我有非常类似的东西。 - slider

抱歉，我犯了一个错误 :-) - Dacre Denny

糟糕 :( 你的答案更好 :| - Paul G Mihai

@PaulGMihai 使用switchClass()是一个有趣的想法！ - Dacre Denny

Answer 2

我更喜欢不必在JavaScript中定义每个类型，而是使用DOM本身来定义类型（您喜欢的方式）。这可以通过将对象包装在容器中来实现。例如：

const buttons = '.buttons button'

$(buttons).click(function() {
  $(buttons).removeClass('selected')
  $(this).addClass('selected')
})

.selected {
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="buttons">
  <button>txt</button>
  <button>xls</button>
  <button>jpg</button>
  <button>png</button>
  <button>pdf</button>
  <button>mp3</button>
  <button>mp4</button>
  <button>gif</button>
  <button>flac</button>
  <button>html</button>
  <button>js</button>
  <button>aac</button>
  <button>ai</button>
  <button>avi</button>
  <button>psd</button>
  <button>tiff</button>
</div>

我也不会同时使用已选择和未选择的类，因为其中一个是多余的。

---

请注意，我这样做的原因是您不应该在dom和javascript中重复文件类型集；只需选择一个地方。最终，我更喜欢完全从javascript内部以数据驱动的方式完成此操作，使用类似于react的东西，但是对于jquery来说，在dom中进行描述是有意义的。

- Matt Way

Answer 3

像这样的吗？

var toggelf = function(event) {
    for(i=0; i<fileTypes.length; i++) 
    {
        fileTypes[i].switchClass("selected","not-selected");
    }
    $(event.currentTarget).switchClass("not-selected","selected");
}

for(i=0; i<fileTypes.length; i++) 
{
    $(fileTypes[i]).click(toggelf);
}

我没有测试过，但应该可以工作。基本上，我创建了一个匿名函数并将其分配给一个变量，然后将其用作所有对象的点击处理程序。

- Paul G Mihai

---

你不应该将变量名命名为switch，因为它是JavaScript词汇中的关键字。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords - Tom O.

@tommyO 是的，这发生在凌晨2点，没有测试... 编辑代码。 - Paul G Mihai