将纯JS转换为数组[i].className的jquery？答案

【问题标题】：Converting pure JS to jquery for array[i].className?将纯JS转换为数组[i].className的jquery？
【发布时间】：2018-03-07 17:08:14
【问题描述】：

我有一个纯 JS 函数，我尝试在其中将多数转换为 jquery。如何将整个函数设置为正确的jquery syntax？

 function openResources(e, resourceName) {
    var i, tabcontent, tabs;
    tabcontent = $(".resources__all-tabs-container");

    for (i = 0; i < tabcontent.length; i++) {;
        tabcontent[i].style.display = "none";
    }

    tabs = $(".resources__tabs");

    for (i = 0; i < tabcontent.length; i++) {
        tabs[i].className = tabs[i].className.replace(" 
 resources__all-tabs", "");
    }

    document.getElementById(resourceName).style.display= "block";
    //$(`"`+ resourceName + `"`)[0].style.display ="block";
    e.currentTarget.className += " resources__all-tabs";

 }

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这个：

tabcontent = $(".resources__all-tabs-container");
for (i = 0; i < tabcontent.length; i++) {;
    tabcontent[i].style.display = "none";
}

应该是：

$(".resources__all-tabs-container").hide();

请看这里：http://api.jquery.com/hide/

这个：

tabs = $(".resources__tabs");
for (i = 0; i < tabcontent.length; i++) {
    tabs[i].className = tabs[i].className.replace("resources__all-tabs", "");
}

应替换为：

$(".resources__tabs").removeClass("resources__all-tabs")

请看这里：https://api.jquery.com/removeclass/

这个：

document.getElementById(resourceName).style.display= "block";

必须替换为：

$("#" + resourceName).show();

请看这里：http://api.jquery.com/show/

这个：

e.currentTarget.className += " resources__all-tabs";

应该是：

$(e.currentTarget).addClass("resources__all-tabs");

请看这里：jquery addClass() not working with event.target

【讨论】：

【解决方案2】：

别忘了你可以在 jQuery 中链接函数。

function openResources(e, resourceName) {
  $(".resources__all-tabs-container").hide();
  $(".resources__tabs").removeClass('resources__all-tabs');
  $('#' + resourceName).show();
  $(e.currentTarget).addClass('resources__all-tabs');
}

【讨论】：

【解决方案3】：

function openResources(e, resourceName) {
  $(".resources__all-tabs-container").hide();
  $(".resources__tabs").removeClass("resources__all-tabs");
  $("#" + resourceName).show();
  $(e.currentTarget).addClass("resources__all-tabs");
}

应该是等效的代码。

【讨论】：

this 不一定是 OP 想要的。另外他想显示#resourceName，而不是隐藏它。
@Zenoo 哦，是的，错过了。已编辑。

【解决方案4】：

function openResources(e, resourceName) {
    var tabcontent = $(".resources__all-tabs-container"), 
        tabs = $(".resources__tabs");

    // hide all tabs and show the one that matches `resourceName`
    tabcontent.hide().filter('#' + resourceName).show();

    // set current tab as selected
    $(e.target).addClass('resources__all-tabs')
}

【讨论】：

【解决方案5】：

类似这样的：

function openResources(e, resourceName) {
      $('.resources__all-tabs-container').each(function() {
          $(this).hide();
      })

      $('.resources__tabs').each(function() {
          $(this).removeClass('.resources__tabs');
      })

      $('#'+resourceName).show();
      $(e.target).addClass('resources__all-tabs');
   }

【讨论】：

不需要每个 - 查看其他答案