点击第1个,可以显示第1个详情。但是点击第2个,本来应该显示第2个详情,但还是显示第1个。这是列表,下面还有一行一行的。
求高手帮忙。
<div class="poject_list" id="poject_list">
<!--第1个--><div class="pitem" link="链接">
<div class="pimg"><img src="图片地址" width="260" height="160" /></div>
<div class="ptext_bg"></div>
<div class="ptext_bg_2"></div>
<div class="ptext">
标题
</div>
</div>
<!--第1个end-->
<!--第2个-->
<div class="pitem" link="链接">
<div class="pimg"><img src="图片" width="260" height="160" /></div>
<div class="ptext_bg"></div>
<div class="ptext_bg_2"></div>
<div class="ptext">
内容
</div>
</div>
<!--第2个end-->
<!--第1个点击要显示的详情-->
<div class="poject_iframe" id="poject_iframe"><span class="close_if" onclick="hideIf()"></span>
<iframe frameborder="0" style="position: absolute; display: none; opacity: 0;"></iframe>
<div class="poject_detail poject_detail_div">
<div class="left_img" >
<ul>
<li class="hover" img="图片" style="display: list-item;"><img src="图片"></li>
</ul>
<div class="img_bar" ><a href="javascript:" class="hover"></a></div>
</div>
</div>
</div>
<!--第1个点击要显示的详情end-->
<!--第2个点击要显示的详情-->
<div class="poject_iframe" id="poject_iframe"><span class="close_if" onclick="hideIf()"></span>
<iframe frameborder="0" style="position: absolute; display: none; opacity: 0;"></iframe>
<div class="poject_detail poject_detail_div">
<div class="left_img" >
<ul>
<li class="hover" img="图片" style="display: list-item;"><img src="图片"></li>
</ul>
<div class="img_bar" ><a href="javascript:" class="hover"></a></div>
</div>
</div>
</div>
以下是js
<script type="text/javascript">
var color = ["f8c301","eb8c55","58beb8","7ec672"];
var cindex=0;
var clength = $("#poject_list > .pitem").length;
$("#poject_list > .pitem").each(function(i){
if(cindex>3){
cindex=0;
}
$(this).find(".ptext_bg").css("background","#"+color[cindex]);
$(this).find(".ptext_bg_2").css("color","#"+color[cindex]);
cindex++;
if(i>0&&(i+1)%2==0){
$(this).css("margin-right",0);
}
$(this).attr("index",i);
});
$("#poject_list > .pitem").mouseover(function(){
$(this).addClass("hover").find(".ptext_bg").stop(true,false).animate({"height":160+"px"},700,"easeInOutExpo");
}).mouseleave(function(){
if($(this).hasClass("current"))return;
$(this).removeClass("hover").find(".ptext_bg").stop(true,false).animate({"height":3+"px"},700,"easeInOutExpo");
}).click(function(){
var _this = $(this);
if($(this).hasClass("current")) return;
$(this).addClass("current").siblings(".current").removeClass("current hover").find(".ptext_bg").stop(true,false).animate({"height":3+"px"},700,"easeInOutExpo");
var index = parseInt($(this).attr("index"));
var slink = $(this).attr("link");
if((index+1)%2!=0&&index<clength-1){
index++;
}
showIframe(index,slink);
setTimeout(function(){
var top2 = _this.offset().top;
$("html,body").animate({scrollTop:top2-55},300);
},100);
});
var iframeDiv = $("#poject_iframe");
function showIframe(index,slink){
iframeDiv.show(0).children("iframe").attr("src",slink);
iframeDiv.insertAfter($("#poject_list > .pitem").eq(index));
}
function hideIf(){
iframeDiv.hide(0);
$("#poject_list .current").removeClass("current hover").find(".ptext_bg").stop(true,false).animate({"height":3+"px"},700,"easeInOutExpo");
}
</script>
js里面pitem名称的标签在哪?而且有两个project_iframe的id,id应该是唯一的,可以用name属性
你那个 var cindex没用,想法是好的,效果是不对的。
而且初始化最好使用:$(document).ready
我大概给你写了个,你将自己的业务写在对应方法里
var color = ["f8c301", "eb8c55", "58beb8", "7ec672"];
$(document).ready(function () {
$("#poject_list > .pitem").each(function (i) {
var nIndex = $(this).index();//这个就可以取得.pitem在“兄弟”元素间的位置索引
$(this).click(function () {
//这里自己为点击事件修改内容
$(this).find(".ptext_bg").css("background", "#" + color[nIndex]);
$(this).find(".ptext_bg_2").css("color", "#" + color[nIndex]);
alert(nIndex);
}).mouseover(function () {
//这里自己为over事件修改内容,nIndex可用
$(this).find(".ptext_bg").css("color", "#f00");
}).mouseleave(function () {
//这里自己为leave事件修改内容,nIndex可用
$(this).find(".ptext_bg").css("color", "#000");
});
});
});
id重复了,一样的id只能获取到第一个
$("#poject_list > .pitem").mouseover(function () {
$(this).addClass("hover").find(".ptext_bg").stop(true, false).animate({ "height": 160 + "px" }, 700);
}).mouseleave(function () {
if ($(this).hasClass("current")) return;
$(this).removeClass("hover").find(".ptext_bg").stop(true, false).animate({ "height": 3 + "px" }, 700);
}).click(function () {
var _this = $(this);
if ($(this).hasClass("current")) return;
$(this).addClass("current").siblings(".current").removeClass("current hover").find(".ptext_bg").stop(true, false).animate({ "height": 3 + "px" }, 700);
var index = parseInt($(this).attr("index"));
var slink = $(this).attr("link");
/*if ((index + 1) % 2 != 0 && index < clength - 1) {//不懂你多这个代码有什么用。。直接获取下标不就行了
index++;
}*/
showIframe(index, slink);
setTimeout(function () {
var top2 = _this.offset().top;
$("html,body").animate({ scrollTop: top2 - 55 }, 300);
}, 100);
});
//var iframeDiv = $("#poject_iframe");
var iframeDiv = $(".poject_iframe");////////要用样式选择器
function showIframe(index, slink) {
iframeDiv.eq(index).show(0).children("iframe").attr("src", slink);
iframeDiv.eq(index).insertAfter($("#poject_list > .pitem").eq(index));
}