0

作为一个整体，我对 JQuery 和 JavaScript 还是很陌生，所以请耐心等待。我尝试在网上搜索我的问题的答案并进行了一些实验，但我快干了。无论如何，有没有办法用 JavaScript将多个 CSS 类存储在一个数组中？

我正在为朋友的投资组合网站编写一些简单的 JQuery，例如：

$('.item.two').click(function(){
    $('.content.item, .current.item').show();
    $('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();
    $('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
    $('.item.two').fadeTo(0, 1.0);
});

所有这一切都是隐藏某些元素，并且仅在单击其相应图标时才显示它们。当点击时，这也将不透明度从主类的 50% 变为 100%。

代码本身没有问题，它达到了预期的目的。但是有没有办法通过将这些类保存到一个可重用的数组中来稍微清理一下这段代码？我觉得这应该是可能的，但我不确定如何。

谢谢！

编辑：对不起，我不清楚我实际上是在使用 4 个不同的类来隐藏或显示。所以实际上不是之前的位

$('.item.two').click(function(){
    // this is the content i want to show on click
    $('.content.itemTwo').show();
    // this is the content that i want to hide/remain hiding on click
    $('.content.itemOne, .content.itemThree, .content.itemFour').hide();

    // these are icons representing the content
    $('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
    $('.item.two').fadeTo(0, 1.0);
});

另外，这是你们中的一些人要求的我的 HTML。就像我说的，我试图让事情发生，发生了。我只是觉得有更好的方法来实现它。

<!-- these are icons representing the written content-->
<div class="item one">
    <div class="fs1" aria-hidden="true" data-icon="&#xe000;"></div>
</div>
<div class="item two">
    <div class="fs1" aria-hidden="true" data-icon="&#xe003;"></div>
</div>
<div class="item three">
    <div class="fs1" aria-hidden="true" data-icon="&#xe001;"></div>
</div>
<div class="item four">
    <div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div>
</div>

<!-- this is the written content to be shown upon clicking corresponding icon -->
<div class="content itemOne">
    <h3>itemOne</h3>
    <p>....</p>
</div>
<div class="content itemTwo">
    <h3>itemTwo</h3>
    <p>...</p>
<div class="content itemThree">
    <h3>itemThree</h3>
    <p>...</p>
</div>
<div class="content itemFour">
    <h3>itemFour</h3>
    <p>....</p>
</div>

现在看，我可能不需要 .content 或 .item 上的额外选择器。

4

4 回答 4

1

如果我理解正确，您正在尝试更改单击的元素。

 $('.item.two').click(function(){
    // there is no reason to show and then hide all
    $('.content.item, .current.item').hide();
    $('.item').not(this).fadeTo(0, 0.5);
    $(this).fadeTo(0, 1.0);
});

检查这是否适合您

编辑另一个方法可能是在循环中的类中使用索引后缀，例如

您可以改用 class1、class2、class3。

$('.item.two').click(function(){
    // this is the content i want to show on click
    $('.content.itemTwo').show();
    // this is the content that i want to hide/remain hiding on click
    $('.content.itemOne, .content.itemThree, .content.itemFour').hide();

    // these are icons representing the content
    $('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
    $('.item.two').fadeTo(0, 1.0);
});

至

for(var i=1;i<=4;i++){
  $('.item.'+i).click(function(){
        // this is the content i want to show on click
        $('.content.class'+i).show();
        // this is the content that i want to hide/remain hiding on click
        $('.content class').hide();

        // these are icons representing the content
        $('.item').not(this).fadeTo(0, 0.5);
        $(this).fadeTo(0, 1.0);
    });

}

希望你能从中得到接近

于 2013-07-25T05:32:45.730 回答
0

使用push类似的方法

var arrayClass = [];
$('.item.two').click(function() { 
   arrayClass.push($(this));
});

alert(arrayClass);
于 2013-07-25T05:26:34.967 回答
0

您不必一遍又一遍地重复相同的课程，也不需要将课程存储在数组中。

改变

 $('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();

至

 $('.content.item').hide();

您可以将类存储在string而不是array在这种情况下 $('.item.one, .item.three, .item.four')

classesSet = ".item.one, .item.three, .item.four";
$(strClassesSet).fadeTo(0, 0.5);
于 2013-07-25T05:29:01.433 回答
0

您的意思是您尝试使用 jQuery 选择项目列表，因为您一直在使用很多类？您可以通过使用 jquery 索引、eq 和 this 选择器来做到这一点。以下是有关如何使用索引功能使代码更短的完整说明 http://api.jquery.com/index/

于 2013-07-25T05:29:59.233 回答