Question

我有多个按钮（目前有12个），所有ID都跟以下相同。每个btn启动一个相同的功能但不同的ID容器。这是HTML：

<!----the btnS-->
<div id="projectA"></div>
<div id="projectB"></div>
<div id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
    <div id="closeA">
        <p class="text">close</p>
    </div>
</div>
<div class="content_projectB">this is content B!!!!
    <div id="closeB">
        <p class="text">close</p>
    </div>
</div>
<div class="content_projectC">this is content C!!!!
    <div id="closeC">
        <p class="text">close</p>
    </div>
</div>

我有一个有效的代码，但它包含超过500行...... 这是JS：

$(document).ready(function () {
    $("#projectA").on("click", function () {
        $(".content_projectA").slideDown();
        $('html,body').animate({
            scrollTop: 300
        }, 200);
    });

    $("#closeA").on("click", function () {
        $(".content_projectA").hide();
        $('html,body').animate({
            scrollTop: 200
        }, 400);
    });
});

//---- B -------//

$(document).ready(function () {
    $("#projectB").on("click", function () {
        $(".content_projectB").slideDown();
        $('html,body').animate({
            scrollTop: 300
        }, 200);
    });

    $("#closeB").on("click", function () {
        $(".content_projectB").hide();
        $('html,body').animate({
            scrollTop: 200
        }, 400);
    });
});

//---- C -------//

$(document).ready(function () {
    $("#projectC").on("click", function () {
        $(".content_projectC").slideDown();
        $('html,body').animate({
            scrollTop: 300
        }, 200);
    });

    $("#closeC").on("click", function () {
        $(".content_projectC").hide();
        $('html,body').animate({
            scrollTop: 200
        }, 400);
    });
});

我正在寻找一种缩短它的方法。

这是关于小提琴的代码 - http://jsfiddle.net/mirifarr/6j060L2k/ 非常感谢

Answer 1

请看这里：

http://jsfiddle.net/6j060L2k/4/

<!----the btnS-->
<div class="project" id="projectA"></div>
<div class="project" id="projectB"></div>
<div class="project" id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
    <div  id="closeA">
    <p  id="A" class="close text">close</p>
    </div>
</div>
<div class="content_projectB">this is content B!!!!
    <div id="closeB">
    <p id="B" class="close text">close</p>
    </div>
</div>
<div class="content_projectC">this is content C!!!!
    <div id="closeC">
    <p id="C" class=" close text">close</p>
    </div>
</div>

JS：

$(document).ready(function () {
    $(".project").on("click", function () {
    $(".content_"+$(this).attr('id')).slideDown();
    $('html,body').animate({
        scrollTop: 300
    }, 200);
    });

    $(".close").on("click", function () {       
    //$(".content_projectA").hide();
    $(".content_project"+$(this).attr('id')).hide();
    $('html,body').animate({
        scrollTop: 200
    }, 400);
    });
});

Answer 2

使用以下Jquery选择器

Selector On Starts With

并更新您的JS代码，如：

$(document).ready(function () {

//// Project
$("[id^='project']").click(function () {
    var char = $(this).attr('id').substring(7);

    $(".content_project" + char).slideDown();
    $('html,body').animate({
        scrollTop: 300
    }, 200);
});

///// Close Div
$("[id^='close']").click(function () {
    var char = $(this).attr('id').substring(5);

    $(".content_project" + char).hide();
    $('html,body').animate({
        scrollTop: 200
    }, 400);
});

});

Check Updated Fiddle

Answer 3

使用jQuery 以选择器^开头。检索单击的div的最后一个字符，然后使用滚动到目标div。

$("[id^=project]").on("click", function () {
   var id = this.id,
       letter = id.substr(id.length - 1);
});

使用letter将div定位到类content_project。对close按钮/ div。

执行相同操作

fiddle看起来比下面的代码段更好。

$(document).ready(function () {
    $("[id^=project]").on("click", function () {
        var id = this.id,
            letter = id.substr(id.length - 1);
        $(".content_project" + letter).slideDown();
        $('html,body').animate({
            scrollTop: 300
        }, 200);
    });

    $("[id^=close]").on("click", function () {
        var id = this.id,
            letter = id.substr(id.length - 1);
        $(".content_project" + letter).hide();
        $('html,body').animate({
            scrollTop: 200
        }, 400);
    });
});

#projectA {
    width: 200px;
    height: 200px;
    background-color: #0f36ca;
    cursor: pointer;
}
#projectB {
    width: 200px;
    height: 200px;
    background-color: #0ff5ca;
    cursor: pointer;
}
#projectC {
    width: 200px;
    height: 200px;
    background-color: #6f36ca;
    cursor: pointer;
}
.content_projectA {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #0f36ca;
    display: none;
}
.content_projectB {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #0ff5ca;
    display: none;
}
.content_projectC {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #6f36ca;
    display: none;
}
.text {
    color: #fff;
    margin: auto;
}
#closeA {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: #000;
    cursor: pointer;
}
#closeB {
    width: 100px;
    height: 100px;
    background-color: #000;
    cursor: pointer;
}
#closeC {
    width: 100px;
    height: 100px;
    background-color: #000;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!----the btnS-->
<div id="projectA"></div>
<div id="projectB"></div>
<div id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
    <div id="closeA">
        <p class="text">close</p>
    </div>
</div>
<div class="content_projectB">this is content B!!!!
    <div id="closeB">
        <p class="text">close</p>
    </div>
</div>
<div class="content_projectC">this is content C!!!!
    <div id="closeC">
        <p class="text">close</p>
    </div>
</div>

Answer 4

嗯，我没有改变CSS，所以我不会再发帖了。

<强> JS：

    function openContents(classChar) {

    //this don't need to be inside an onclick event because this event is already triggered when accessing this function
    $(".content_project"+classChar).slideDown();
    $('html,body').animate({
        scrollTop: 300
    }, 200); 

    //this one continues to bind the event to the close div
    $("#close"+classChar).on("click", function () {
        $(".content_project"+classChar).hide();
        $('html,body').animate({
            scrollTop: 200
        }, 400);
    });
}

//on document ready, execute init()
function init() {

    /*
     * What I did here was bind a click event to all three divs, using a class to identify them, instead of picking one by one.
     * Then store id value of clicked div in a variable and sending the last char as parameter to openContents function.
     */
    $(".projects").on("click",function() {
        var idValue = $(this).attr('id');
        openContents(idValue.substr(idValue.length-1));
    });

}

$(document).ready(init);

html（刚添加的课程）：

<!----the btnS-->
<div id="projectA" class="projects"></div>
<div id="projectB" class="projects"></div>
<div id="projectC" class="projects"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
    <div id="closeA">
        <p class="text">close</p>
    </div>
</div>
<div class="content_projectB">this is content B!!!!
    <div id="closeB">
        <p class="text">close</p>
    </div>
</div>
<div class="content_projectC">this is content C!!!!
    <div id="closeC">
        <p class="text">close</p>
    </div>
</div>

http://jsfiddle.net/6j060L2k/9/

多个按钮打开相同的操作但不同的ID容器

4 个答案: