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

请看这里：

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);
    });
});

使用以下 Jquery 选择器

选择器开启开始于

并更新您的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);
});
});

检查更新的小提琴

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

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

使用letter将div 与类 content_project 定位。对close按钮/div 执行相同的操作。

小提琴看起来比下面的代码片段更好。

$(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>

好吧，我没有更改 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/