jQuery toggle 클래스를 버튼들에 적용하려고 하는데요. 채택완료
bismute
11년 전
조회 5,972
게시판이 로딩 되면 게시물을 DB에서 가져오고
게시물에 등록된 이미지와 제목이 순차적으로 노출됩니다.
사용자가 제목을 클릭하면 선택한 게시물의 제목에만 Style을 주려고 합니다.
jQuery로 해보려고 하는데 클릭된 개체의 id값을 지정하는 방법으로는 해봤는데
그 id 값이 게시물 갯수에 따라 동적으로 변하기 때문에 선택한 게시물 제목이 아니라
페이지에 모든 게시물들의 제목들이 다 변경됩니다.
선택한 게시물과 선택하지 않은 게시물에 대해 toggleClass를 처리하는 방법이 따로 있을까요?
게시물에 등록된 이미지와 제목이 순차적으로 노출됩니다.
사용자가 제목을 클릭하면 선택한 게시물의 제목에만 Style을 주려고 합니다.
jQuery로 해보려고 하는데 클릭된 개체의 id값을 지정하는 방법으로는 해봤는데
그 id 값이 게시물 갯수에 따라 동적으로 변하기 때문에 선택한 게시물 제목이 아니라
페이지에 모든 게시물들의 제목들이 다 변경됩니다.
선택한 게시물과 선택하지 않은 게시물에 대해 toggleClass를 처리하는 방법이 따로 있을까요?
</div>
<div><pre style="line-height: normal"><style>
.blue{color:blue;}
</style>
<script>
function view_img2(img2, hh, adj_index){
document.getElementById("main_img").src = img2;
$('#main_img').css('height',hh); //가로는 800고정, 높이를 원본으로 할 때
jQuery("#dandy"+adj_index).toggleClass("blue"); //해당 버튼 클릭했을 때, 스타일 적용하게 하기 위해
}
</script>
<?
for ($i=0; $i<count($list); $i++)
{
$title = "자세히보기";
$content = cut_str(get_text($list[$i][wr_content]), 180);
$subject = cut_str(get_text($list[$i][subject]), 100, '...');
$img_width = '160'; // 이미지 개당 가로크기
$img_height = '120'; // 이미지 개당 세로크기
$img = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][0][file]);
$img2 = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][1][file]);
$adj_height = $list[$i][file][1][image_height];
if (!file_exists($img) || !$list[$i][file][0][file])
$img = "$board_skin_path/img/no_image.gif";
if ($is_admin)
$view_href = "$g4[bbs_path]/board.php?bo_table=$bo_table&wr_id={$list[$i][wr_id]}";
else
$view_href = "#";
$checkbox = "";
if ($is_checkbox)
$checkbox = "<input type=checkbox name=chk_wr_id[] value='{$list[$i][wr_id]}'>";
$tr = "";
if ($i && $i%$board[bo_gallery_cols]==0)
$tr = "</tr><tr>";
echo "$tr";
echo <<<HEREDOC
<td width="{$td_width}%" valign="top" align="center" >
<table width="200" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="{$img}" width='{$img_width}' height='{$img_height}' border="0" title="$title" style="border:0px solid #000000;cursor:pointer;" onClick="view_img2('$img2','$adj_height')">
</td>
</tr>
<tr>
<td align="center" class="entitle" style="cursor:pointer;" onClick="view_img2('$img2','$adj_height', '$adj_index')">{$checkbox} <font id="dandy$adj_index" class="dandy" value="$i">{$subject}</font></td>
</tr>
</table>
</td>
HEREDOC;
}
?></pre></div>
<div>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
jQuery나 자바스크립트로 클릭 시 값을 구분하기 위해 조금 번거롭지만, 따로 값을 저장하도록 하는 중입니다.