有没有办法缩短这个jQuery代码？

我有一个jQuery脚本，但它很长（我认为）有没有办法缩短这段代码？该代码将类添加到按钮和一个段落，以便它们显示自己的文本，每个按钮都有自己的文本（段落）。有没有办法缩短这个jQuery代码？

我谈论的jQuery代码;），但我可以改变HTML，如果需要的CSS藏汉

$(function() {      //run when the DOM is ready 
    $(".button-case.een").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.een").toggleClass("active"); 
    $("p.inner-p.een").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.twee").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.twee").toggleClass("active"); 
    $("p.inner-p.twee").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.drie").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.drie").toggleClass("active"); 
    $("p.inner-p.drie").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.vier").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.vier").toggleClass("active"); 
    $("p.inner-p.vier").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.vijf").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.vijf").toggleClass("active"); 
    $("p.inner-p.vijf").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.zes").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.zes").toggleClass("active"); 
    $("p.inner-p.zes").toggleClass("active"); //add the class to the clicked element 
    }); 
});

来源

2014-11-05 Rikato

您可以将事件处理程序中使用this来指的是引发事件的元素。从那里你可以遍历DOM来修改所需的元素。试试这个：

$(".button-case").click(function() { 
    $(this).toggleClass("active"); 
    $(this).next('p').toggleClass("active"); 
});

Updated Fiddle

你可以事件使一行通过add，如果你真的想：

$(".button-case").click(function() { 
    $(this).add($(this).next()).toggleClass("active"); 
});

然而，这可能是一个有点难看。

来源

2014-11-05 09:55:08

这两个答案的工作THX我会用这一个;-) – Rikato 2014-11-05 09:58:33

马克去，因为答案，如果这种帮助ü – Se0ng11 2014-11-05 10:00:33

不要你忘记了一个* p *选择器？ – Fractaliste 2014-11-05 10:04:04

你可以

$(function() { //run when the DOM is ready 
 
    $(".button-case").click(function() { //use a class, since your ID gets mangled 
 
    //here this refers to the clicked button so 
 
    $(this).toggleClass("active"); 
 
    $(this).next().toggleClass("active"); //add the class to the clicked element 
 
    }); 
 
});

#buttons-case { 
 
    max-width: 707px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.button-case { 
 
    border: 1px solid #8A8A8A; 
 
    color: #8A8A8A; 
 
    font-size: 15px; 
 
    text-align: center; 
 
    line-height: 12px; 
 
    font: 300 15px/0.925"Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 
.btn { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 169px; 
 
    margin: 9px 21px auto; 
 
    padding: 10px; 
 
    height: 12px; 
 
} 
 
.btn.active { 
 
    height: 60px; 
 
    width: 707px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 500; 
 
    background: #fff; 
 
    padding-left: 24px; 
 
    padding-top: 16px; 
 
} 
 
.button-case.active { 
 
    text-align: left; 
 
} 
 
.button-holder { 
 
    max-width: 707px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
p.inner-p { 
 
    display: none; 
 
} 
 
p.inner-p.active { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 600; 
 
    top: 35px; 
 
    left: 46px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="button-holder"> 
 
    <div id="buttons-case"> 
 
    <a href="#" class="button-case btn een">GepasteTypografie</a> 
 
    <p class="inner-p een">eerste</p> 
 
    <a href="#" class="button-case btn twee">Grafische elementen</a> 
 
    <p class="inner-p twee">tweede</p> 
 
    <a href="#" class="button-case btn drie">Ga naar</a> 
 
    <p class="inner-p drie">derde</p> 
 
    <a href="#" class="button-case btn vier">Duidelijk werkproces</a> 
 
    <p class="inner-p vier">vierde</p> 
 
    <a href="#" class="button-case btn vijf">Responsive design</a> 
 
    <p class="inner-p vijf">vijfde</p> 
 
    <a href="#" class="button-case btn zes">Gebruiksvriendelijk</a> 
 
    <p class="inner-p zes">zesde</p> 
 
    </div> 
 
</div>

来源

2014-11-05 09:55:14

两个答案都有效，我会和另外一个一起去。因为它稍微短一点谢谢！ – Rikato 2014-11-05 09:59:05

您可以通过它添加所有选择到阵列和循环绑定你需要的一切。像这样：

$(function() { 
    var sels = [$(".button-case.een"), $(".button-case.twee"), /* ... */]; 

    for (var i = 0, max = sels.length; i < max; i++ { 
     var sel = sels[i]; 
     sel.on('click', function() {/* code */}); 
    } 

});

请注意，这只是一个例子。如果它更好，你可以用类来编写数组，甚至可以使用所有关于每个绑定的元数据来对象，并通过它循环。

您也可以将此方法与来自其他答案的优化结合使用。

来源

2014-11-05 09:57:39

创建切换功能和发送类的信息给该函数：

function toggleFunc(data) { 
    $(".button-case." + data).click(function() { 
    $(".button-case." + data).toggleClass("active"); 
    $("p.inner-p." + data).toggleClass("active"); 
}); 

$(function() { 
    toggleFunc('een'); 
    toggleFunc('twee'); 
    toggleFunc('drie'); 
    toggleFunc('vier'); 
    toggleFunc('vijf'); 
    toggleFunc('zes'); 
});

来源

2014-11-05 09:58:53 rishiAgar

有没有办法缩短这个jQuery代码？

回答

相关问题