전체 부모 div 클릭 가능 영역 만들기

Question

이 질문은 여러 번 답변되었을 수도 있지만 도움을 필요로합니다.

<div class="bookView"> 
    @for (int i = 0; i < Model.Count; i++) 
    { 
     <div class="bookUnit" onclick="$@Url.Action("SeeBook", new { bookID = Model[i].BookID})"> 
      <span class="linkSpan"></span> 
      <div class="bookTitle" data-id="@Model[i].BookID"> 
       @Html.DisplayFor(_item => _item[i].BookName) 
      </div>  
      <div class="bookDetail"> 
       <div class="bookCategory"> 
        @Html.DisplayFor(_item =>_item[i].Category.CategoryName) 
       </div> 
       <div class="bookEditor"> 
        @Html.DisplayFor(_item => _item[i].Editor.EditorName) 
       </div> 
       <div class="bookDate"> 
        @Model[i].DateAdded.ToShortDateString() 
       </div> 
      </div> 
      <div class="bookScore"> 
       Score: @Html.DisplayFor(_item => _item[i].Score) 
      </div> 
      <div class="clear"></div> 
     </div> 
    } 
</div> 

그리고 여기에 관련 CSS의 :

나는이보기가

.linkSpan { 
    width:100%; 
    height:100%; 
    /*top:0;*/ 
    /*left: 0;*/ 
    display: block; 
    /* edit: added z-index */ 
    z-index: 1; 
    /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */ 
    /*background-image: url('empty.gif');*/ 
} 

.bookView { 
    padding: 5px; 
    margin: 5px; 
    vertical-align: middle; 
} 

.bookView div { 
    padding: 5px; 
} 

.bookUnit { 
    clear: both; 
    position: relative; 
    background-color: white; 
    border: 1px solid lightblue; 
    z-index: 0; 
} 

.bookUnit:hover { 
    border: 1px solid red; 
} 

.bookTitle { 
    float: left; 
    font-weight: bold; 
} 

.bookDetail { 
    float: left; 
} 

.bookScore { 
    float: left; 
} 

그래서 목표는 모든 내용이 전체 bookUnit 사업부가 안고 클릭 할 수있는 영역이 될 것입니다 내 컨트롤러 방법 ID. 루프 당이 있지만 각 div는 자체 ID를 가지고 있습니다. 당신이 볼 수있는

은 내가 anchor 방법을 시도했습니다,하지만, 모든 일을 클릭 할 수 있도록 그것에 click 이벤트를 결합 할 경우는 ...

Answer 1

은 실제로 당신이 그렇게 할 순간에 자바 스크립트 코드, 체크 this tutorial을 포함해야합니다.

하지만 중첩하여 div 태그와 당신이이 속성을 적용해야합니다 내부 앵커 태그,

display:block; 

당신이 것을 해봤해야 CSS 코드 를 사용하여이를 달성하기 까다로운 방법이 , 전체 너비 영역을 클릭 할 수있게 만들지 만 (앵커 태그 높이 내에서) div 영역의 전체 높이를 설정하려면 div 태그 높이와 앵커 태그 높이를 정확하게 설정해야합니다 (예 :

height:60px; 

이것은 전체 영역을 만들 것입니다. c lickable이면 목표를 달성하기 위해 앵커 태그에 text-indent:-9999px을 적용 할 수 있습니다.

이것은 정말 까다 롭고 간단하며 CSS 코드를 사용하여 만들어졌습니다.

Answer 2

를 작동하지 않았다. 당신은 attr()과의 ID에 액세스 할 수 있습니다

$(".bookUnit").click(function(){ 
    var bookId = $(this).attr("id"); 
    //Do stuff 
});