Question

<html>
    <head>
    <link rel="stylesheet" href="css/general.css" />
        <link id="style_replace" rel="stylesheet" href="css/default.css" />
        <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
        <style type="text/css">.pretty { color:pink; }</style> 
        <script type="text/javascript">
        function showApple(bakedGood)
        {
            $("#applepie_off, .apple_description").show();
            $("#applepie_on").hide();
        }

        function hideApple(bakedGood)
        {
            $("#applepie_off, .apple_description").hide();
            $("#applepie_on").show();
        }

        function showBanana(bakedGood)
        {
            $("#banana_off, .banana_description").show();
            $("#banana_on").hide();
        }

        function hideBanana(bakedGood)
        {
            $("#banana_off, .banana_description").hide();
            $("#banana_on").show();
        }

        function showCarrot(bakedGood)
        {
            $("#carrot_off, .carrot_description").show();
            $("#carrot_on").hide();
        }

        function hideCarrot(bakedGood)
        {
            $("#carrot_off, .carrot_description").hide();
            $("#carrot_on").show();
        }

        function showCookie(bakedGood)
        {
            $("#cookie_off, .cookie_description").show();
            $("#cookie_on").hide();
        }

        function hideCookie(bakedGood)
        {
            $("#cookie_off, .cookie_description").hide();
            $("#cookie_on").show();
        }

        function changeStyleSheet(styleName)
        {
            $("#style_replace").attr("href", "css/" + styleName + ".css");
        }

    $(function()
        {
            $(".contract, .apple_description, .banana_description, .carrot_description, .cookie_description").hide();

        });

</script>

原版的更大的文字

<h1>Recepie List</h1>

<div id="list">

    <div id="apple_pie" class="recepie">

        <h3>Apple Pie</h3>

        <a class="expand" id="applepie_on" href="#" onClick="showApple()">expand</a> 
        <a class="contract" href="#" id="applepie_off" onClick="hideApple()">contract</a>

        <img class="desert_img" src="images/apple_pie.jpg" />

        <p class="apple_description">   
            This was my grandmother's apple pie recipe. <br />
            I have never seen another one quite like it. <br />
            It will always be my favorite and has won me <br />
            several first place prizes in local competitions. <br />
            I hope it becomes one of your favorites as well!
        </p>

    </div>

    <div id="banana_bread" class="recepie">

        <h3>Banana Bread</h3>

        <a class="expand" id="banana_on" href="#" onClick="showBanana('banana_bread')">expand</a> 
        <a class="contract" id="banana_off" href="#" onClick="hideBanana('banana_bread')">contract</a> 

        <img class="desert_img" src="images/banana_bread.jpg" />

        <p class="banana_description">  
            Why compromise the banana flavor? This banana <br />
            bread is moist and delicious with loads of <br />
            banana flavor! Friends and family love my recipe <br />
            and say it's by far the best! It's wonderful toasted!! Enjoy!
        </p>

    </div>

    <div id="carrott_cake" class="recepie">

        <h3>Carrott Cake</h3>

        <a class="expand" id="carrot_on" href="#" onClick="showCarrot('carrot_cake')">expand</a> 
        <a class="contract" id="carrot_off" href="#" onClick="hideCarrot('carrot_cake')">contract</a> 

        <img class="desert_img" src="images/carrott_cake.jpg" />

        <p class="carrot_description">  
            Why compromise the banana flavor? This banana <br />
            bread is moist and delicious with loads of <br />
            banana flavor! Friends and family love my recipe <br />
            and say it's by far the best! It's wonderful toasted!! Enjoy!
        </p>

    </div>

    <div id="holiday_cookies" class="recepie">

        <h3>Holiday Cookies</h3>

        <a class="expand" id="cookie_on" href="#" onClick="showCookie('holiday_cookies')">expand</a> 
        <a class="contract" id="cookie_off" href="#" onClick="hideCookie('holiday_cookies')">contract</a> 

        <img class="desert_img" src="images/holiday_cookies.jpg" />

        <p class="cookie_description">  
            This is an old family recipe that makes a very <br />
            delicious cookie.
        </p>

    </div>

</div>

Answer 1

function showMyStuff(name,what) {
if(what) {
$("#"+name+"_off, ."+name+"_description").show();
$("#"+name+"_on").hide();
}
else {
$("#"+name+"_off, ."+name+"_description").hide();
$("#"+name+"_on").show();
}
}

用法：

showMyStuff("carrot",true) // this equals to the showCarrot();
showMyStuff("carrot",false) // this equals to the hideCarrot();

Answer 2

这可以大大简化

$(function() {
    $(".contract, [class$='_description']").hide();

    $("a[id$='_on']").click(function(e){
        e.preventDefault();
        $(this).siblings(":not(img,h3)").add(this).toggle();
    });

    $("a[id$='_off']").click(function(e){
        e.preventDefault();
        $(this).siblings(":not(img,h3)").add(this).toggle();
    });
});

我使用结尾的 [$='']属性选择器，非选择器 :not()选择器和添加 add()遍历者。由于您使用的是jQuery，因此无需内联绑定onclick事件，请使用click事件绑定器。

click事件会查找被点击元素的所有兄弟节点，但h3和img标签除外，如果隐藏则会显示toggle()，如果显示则隐藏它。

工作示例：http://jsfiddle.net/hunter/SPtqW/

Answer 3

See example of the following here.

首先，我已从您的HTML中删除了您的onclick处理程序，并将它们放在jQuery中。

然后在点击功能中，我使用方法next()，prev()和nextAll()来帮助找到要显示和隐藏的相应元素。有关这些方法的详细信息，请参阅http://api.jquery.com/。

$('.expand').click(function(e){
    e.preventDefault();
    $this = $(this);
    $this.nextAll('p').first().show();
    $this.next('.contract').show();
    $this.hide();
});

$('.contract').click(function(e){
    e.preventDefault();
    $this = $(this);
    $this.nextAll('p').first().hide();
    $this.prev('.expand').show();
    $this.hide();
});

See example.

Answer 4

看起来你正在尝试创建一个手风琴风格的界面。如果是这样，您可能需要查看作为JQuery UI一部分的accordion小部件：

http://jqueryui.com/demos/accordion/

Answer 5

如果您想将更改集中在“描述”和“按钮”上，您可以使用以下命令更改 @ hunter的答案：

$(this).siblings(".expand, [class$='_description']").add(this).toggle();

并且

$(this).siblings(".contract, [class$='_description']").add(this).toggle();

这是@ Hunter's Fiddle的一个分支，有这些修改：http://jsfiddle.net/akarun/FTRHQ/

如何在一个大函数下的for循环或if语句中压缩和调用每个函数？

5 个答案: