这里是javascript代码我的问题是相同的javascript代码在索引文件中工作相同的html代码但不在组合文件中工作，我已经尝试了我能想到的一切。我已经使用了文档点就绪函数和添加脚本文件在正文的底部，当我在控制台日志中尝试时代码正常工作
$(function() {
var selectedClass = "";
$(".portfolio_btn").click(function(){
selectedClass = $(this).attr("data-rel");
$("#portfolio").fadeTo(100, 0.1);
$(".portfolio_item").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#portfolio").fadeTo(300, 1);
$(".port")
}, 300);
});
});
var header = document.getElementById("portfolio_btn_container");
var btns = header.getElementsByClassName("portfolio_btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("portfolio_btn active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}.portfolio_container{
width:100%;
height:auto;
margin-top:50px;
}
.portfolio_btn_container{
width: 50%;
margin-left: 26%;
}
.portfolio_btn {
font-family: Lato;
font-size:18px;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding:8px 35px 10px 30px;
margin: 0;
height: auto;
border: 1px solid #1ABC9C;
vertical-align: middle;
-webkit-appearance: none;
color: #555;
outline:none;
background-color: rgba(0, 0, 0, 0);
}
.portfolio_btn.active{
background-color:#1ABC9C;
color:white;
}
.portfolio{
width:90%;
height: auto;
margin-top: 50px;
margin-left:5%;
}
.portfolio_item{
webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
width:300px;
height:300px;
display:inline-block;
}
.portfolio_item img{
width:100%;
height:100%;
}
.portfolio_bio_inner{
width:100%;
height:100%;
position:absolute;
display:inline-block;
}
.portfolio_bio_text{
font-size:25px;
webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
color:#434343;
text-decoration:none;
}
.portfolio_bio_h4{
padding-left:75px;
}
.portfolio_bio_p{
font-size:20px;
letter-spacing: 1px;
line-height: 18px;
padding: 0px 5px 0px 25px;
}
.scale-anm {
transform: scale(1);
}
.portfolio_item:hover .portfolio_bio_inner h4,.portfolio_item:hover .portfolio_bio_inner p{
transform: scale(1);
}
.portfolio_item:hover .portfolio_bio_inner{
background:white;
opacity:0.8;
}<div class="portfolio_container"><!--portfolio starts-->
<div class="portfolio_title">
<h2>Portfolio</h2>
<p>web page editors now use Lorem Ipsum as their default model text</p></div>
<div class="portfolio_btn_container" id="portfolio_btn_container">
<button class="portfolio_btn active" href="" data-rel="all">All</button>
<button class="portfolio_btn" data-rel="photo">Photo</button>
<button class="portfolio_btn" data-rel="branding">Branding</button>
<button class="portfolio_btn" data-rel="techno">Technology</button>
<button class="portfolio_btn" data-rel="creative">Creative</button>
</div>
<div class="portfolio" id="portfolio">
<div class="portfolio_item scale-anm branding all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/15-dia_1092-1-300x300.jpg" alt="" />
</div>
<div class="portfolio_item scale-anm photo all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/3387c282bae062cc6efada9402ef42ad.jpg" alt="" />
</div>
<div class="portfolio_item scale-anm techno all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/emi_haze-300x201.jpg" alt="" />
</div>
<div class="portfolio_item scale-anm creative all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/3387c282bae062cc6efada9402ef42ad.jpg" alt="" />
</div>
<div class="portfolio_item scale-anm photo all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/3387c282bae062cc6efada9402ef42ad.jpg" alt="" />
</div>
<div class="portfolio_item scale-anm branding all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/iPhone-Text-Monitoring-on-Apple-Devices-Yes-And-So-Much-More.jpg" alt="" />
</div>
<div class="portfolio_item scale-anm techno all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/pexels-photo-168765.jpeg" alt="" />
</div>
<div class="portfolio_item scale-anm creative all">
<div class="portfolio_bio_inner">
<h4 class="portfolio_bio_text portfolio_bio_h4">Bussiness Plan</h4>
<p class="portfolio_bio_text portfolio_bio_p">Randomised words which don look even slightly believable. If going to use a passage of Lorem</p>
</div>
<img src="assets/porfolio-4.jpg" alt="" />
</div>
</div>
</div><!--portfolio ends-->