bfca18 2016-06-10 17:09 采纳率: 50%
浏览 1329
已结题

求高手解决一个js,求高手帮忙!

点击第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>

  • 写回答

3条回答 默认 最新

  • _1_1_7_ 2016-06-10 22:42
    关注

    js里面pitem名称的标签在哪?而且有两个project_iframe的id,id应该是唯一的,可以用name属性

    评论

报告相同问题?

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?