我该如何压缩这个Jquery代码？

作者: 浮华丶
发布时间: 2025-01-08 09:46:10 (5天前)
转自：

6 条回复

0#
回复此人
1号 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个： </p> <pre> <code> $( "[id^='click']" ).click(function () { $("#"+$(this).attr("id").replace("click", "slide")).slideToggle("slow"); }); </code> </pre> </DIV>

编辑
1#
回复此人
biu~额 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在您单击的html元素中添加一个类，您可以使用data属性来保存您的值 </p> <pre> <code> <div class="clickme" data-something="1"></div> $(".clickme").click(function(){ var targetNum = (this).data("something"); var targetId = "#slide" + targetNum; $(targetId).slideToggle("slow"); }); </code> </pre> </DIV>

编辑
2#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这有效，但我认为可能还有更好的解决方案 </p> <pre> <code> for ( i= 0; i < 12; i++){ var x = (i !== 0) ? + i : '' ; $("#click" + x).data('slide', x).on('click', function(){ var slide = $(this).data('slide'); $("#slide" + slide).slideToggle("slow"); }); }; </code> </pre> <P> <a href="http://jsfiddle.net/x9eCM/1/" rel="nofollow"> http://jsfiddle.net/x9eCM/1/ </A> </p> </DIV>

编辑
3#
回复此人
别烦我 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您没有显示HTML，这将极大地帮助指导答案，但假设您有一个类似的结构： </p> <pre> <code> <div id="click"></div> <div id="slide"></div> <div id="click2"></div> <div id="slide2"></div> etc. </code> </pre> <P> 然后你可以做一些类似的事情 </p> <pre> <code> <div class="click"></div> <div class="slide"></div> <div class="click"></div> <div class="slide"></div> etc. </code> </pre> <P> 并编写你的jQuery </p> <pre> <code> $(".click").click(function() { $(this).next(".slide").slideToggle("slow"); } </code> </pre> <P> 使用类而不是ID的方法应该是您的一般方法。唯一的变量是我列出的内容 <code> next(".slide") </code> 因为这可能会因HTML元素相对于彼此的放置方式而有所不同。 </p> </DIV>

编辑
4#
回复此人
青年@ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 给他们一个属性将它们绑在一起，例如： </p> <pre> <code> $('.click').click(function () { $($(this).attr('data-toggle-target')).slideToggle('slow'); }); <div class="click" data-toggle-target="#click12">I trigger a slide toggle</div> </code> </pre> <P> 你可以使用你想要的任何东西将它们真正联系在一起。通常如果你使用链接最好jsut使用哈希引用，如： </p> <pre> <code> <a class="click" href="#the-target">I trigger a slide toggle</a> </code> </pre> <P> 这样一来，如果没有启用js，它会跳转到您要切换的潜水。如果它是你得到切换 - 但如果你这样做，你需要防止默认： </p> <pre> <code> $('a.click').click(function (e) { e.preventDefault(); $($(this).attr('href')).slideToggle('slow'); }); </code> </pre> </DIV>

编辑

登录后才能参与评论