この壁で壁を打つと、誰かが手を貸してくれることを願っています。私は多くの固定幅の "コンテンツ" divを含むラッパーdivを持っています。これは表のようなものですが、「行ごと」の項目の数は固定されていないため、画面のサイズが広いと画面に多くの項目が収まるようになります。かなり基本的。表示画面の右側にxピクセルのdivの要素IDを決定するにはどうすればよいですか？
また、これらの「コンテンツ」divのそれぞれには、デフォルトで非表示になっている隣接の「詳細」div（「style = display：none」）と、スタイルのみを含む空の隣接する「separator」div "クリア：両方;"これらのコンテンツのdivの1つがクリックされたとき、私は彼らが（例えば、content123、details1234、separator1234）今
を、関連している伝えることができるように
各コンテンツ/詳細/セパレーターdivが、そのIDで一意の番号を持っています、私はその下の "詳細" divを明らかにする。その部分は、部分的に動作しています。内容divの周りにアンカータグをラップすると、onClick javascriptイベントが発生し、jQueryステートメントを実行して詳細と区切りdivを表示します。jQuery(".details1234").css("display","block");"
私の問題を想像してください。その "セパレータ" divが表示されると、その右側に表示される "content" divをプッシュダウン（クリア）します。私が何時間も苦労してきたのは、content divの "separator" divを明らかにすることです。これは、クリックされた "row"に現れる最後のdivです。こうすることで、セパレータによって新しい「行」が開かれ、「コンテンツ」divが表示されたときに新しい行のクリックされた項目の下に表示されるようになります。これを行うには、「行」の最後のコンテンツdivのelementIDを把握する必要があります。マウスクリックイベントのY座標と、X座標=右端までを使用することを考えていましたラッパーdivの幅から固定幅コンテンツdivの幅の半分を引いたものです。そんな感じ。しかし、私は壁にぶつかり、それを理解することはできません。
誰でも私を助けることができますか？あるいは、別のソリューションを提供していますか？ サンプルコードを参考にすれば、私は例を挙げることができますが、この記事では画面スペースが必要になることがあります。
ありがとうございました。
EDIT：下記のサンプルコードは、私のサイトに基づいています。セルがクリックされると、その下に「詳細」divが表示されますが、残念ながら「行」の他のdivはプッシュダウンされます。それは私が避けようとしている効果です。セルをクリックすると、その下に「詳細」が表示されますが、他のdivも他のセルの詳細の上にとどまります。基本的に「行」はそのままにしておきたいのです。コードでは、 "セパレータ" divを使用して私の無駄な実験を見ることができます。なぜなら、私は前の行の最後のdivの後に挿入できると仮定しているので、 "詳細" divは次の行になり、次のセルの行。私はそれを説明したかったといいなあ。血液が脳から転用させる感謝祭のごちそう;）
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
width:450px;
display:none;
float:left;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
var contentHI = "#content"+contentid;
var detailsON = "#details"+contentid;
var separatorON = "#separator"+contentid;
$(contentHI).css("border","2px solid green");
//$(separatorON).css("display","block");
$(detailsON).css("display","block");
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div>
<div id="details01" class="details">here are details about cell01</div>
<div id="separator01" class="separator"> </div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div>
<div id="details02" class="details">here are details about cell02</div>
<div id="separator02" class="separator"></div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div>
<div id="details03" class="details">here are details about cell03</div>
<div id="separator03" class="separator"></div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div>
<div id="details04" class="details">here are details about cell04</div>
<div id="separator04" class="separator"></div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div>
<div id="details05" class="details">here are details about cell05</div>
<div id="separator05" class="separator"></div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div>
<div id="details06" class="details">here are details about cell06</div>
<div id="separator06" class="separator"></div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>
私はあなたが見ている、またはやっていることを視覚化することができません、私たちが見ることができる場所にこれを投稿できますか？ – Lazarus
@user – kobe
サンプルコードを元の投稿に追加し、私のプロフィールを更新しました。私の表示名は "jhalsey"になりました – jhalsey