jQuery和HTML - 點擊當前的div box id來顯示sub dvi box的內容

這是我的jQuery和HTML代碼。jQuery和HTML - 點擊當前的div box id來顯示sub dvi box的內容

我的目標是當我點擊當前box1，box2或box3時，我想要顯示當前的子框。

例如：當我點擊當前的box1時應該打開當前的sub_box_1，等等。我做了一些jQuery代碼，但我無法得到結果。

謝謝！

$(document).ready(function() { 
 
    $('.sub_box').hide(); 
 
    $('.box').click(function() { 
 
    $(this).$('#sub_box_1').show(); 
 
    }); 
 
});

.box { 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    margin-left: 20px; 
 
    border: 1px solid #333; 
 
    margin-top: 10px; 
 
} 
 
.sub_box { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 1px solid #09c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <div id="wrapp"> 
 

 
    <div id="1" class="box"> 
 
     <b>Box 1</b> 
 

 
     <div id="sub_box_1" class="sub_box"> 
 
     <input type="text" name="user_name" placeholder='User Name' /> 
 
     <button>ADD</button> 
 
     </div> 
 
     <!--sub_box_1--> 
 
    </div> 
 
    <!--1--> 
 

 
    <div id="2" class="box"> 
 
     <b>Box 2</b> 
 
     <div id="sub_box_2" class="sub_box"> 
 
     <input type="text" name="user_email" placeholder='User Email' /> 
 
     <button>ADD</button> 
 
     </div> 
 
     <!--sub_box_2--> 
 
    </div> 
 
    <!--2--> 
 

 
    <div id="3" class="box"> 
 
     <b>Box 3</b> 
 
     <div id="sub_box_3" class="sub_box"> 
 
     <input type="text" name="user_phone" placeholder='User Phone' /> 
 
     <button>ADD</button> 
 
     </div> 
 
     <!--sub_box_3--> 
 
    </div> 
 
    <!--3--> 
 

 
    </div> 
 
    <!--wrapp--> 
 
</body> 
 

 
</html>

來源

2017-01-09 user3559269

改變'$（本） $（'＃sub_box_1'）。show（）;'到'$（this）.find（'。sub_box'）。show（）;' –

非常感謝Michael Coker。很棒，它正在工作。做得好 – user3559269

嘗試使用這樣的：

$(document).ready(function() { 
    $('.sub_box').hide(); 
    $('.box').click(function() { 
    $(this).children('.sub_box').show(); 
    }); 
});

的jsfiddle例如：https://jsfiddle.net/d6zf0n1b/

來源

2017-01-09 20:10:23

只是一個註釋，'.find（「。sub_box」）'也可以使用。 – t4dohx

感謝您的幫助。我試過你的代碼，它的工作也很完美 – user3559269

當您使用$（這）$（ '＃sub_box_1'）。你正試圖執行$（this）返回的$函數。沒有$（this）的$函數。因此你得到一個錯誤。

另一個問題是，您正在嘗試通過「＃」訪問器訪問與id不匹配的類。

所以這就是爲什麼安德烈的答案有效。他從被單擊的盒子開始尋找具有「sub_box」類的直接子女。

有一點需要記住的是，子方法只會從父級向下搜索一級。如果該框可能更深，則應使用「查找」方法。

來源

2017-01-09 20:18:03 MikeS

感謝您的幫助和建議 – user3559269

可以使用jQueryfind方法（https://api.jquery.com/find/），這將找到的元素中的元素使用選擇匹配，試試這個：

$(document).ready(function() { 
 
    $('.sub_box').hide(); 
 
    $('.box').click(function() { 
 
    $(this).find('.sub_box').show(); 
 
    }); 
 
});

.box { 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    margin-left: 20px; 
 
    border: 1px solid #333; 
 
    margin-top: 10px; 
 
} 
 
.sub_box { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 1px solid #09c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <div id="wrapp"> 
 

 
    <div id="1" class="box"> 
 
     <b>Box 1</b> 
 

 
     <div id="sub_box_1" class="sub_box"> 
 
     <input type="text" name="user_name" placeholder='User Name' /> 
 
     <button>ADD</button> 
 
     </div> 
 
     <!--sub_box_1--> 
 
    </div> 
 
    <!--1--> 
 

 
    <div id="2" class="box"> 
 
     <b>Box 2</b> 
 
     <div id="sub_box_2" class="sub_box"> 
 
     <input type="text" name="user_email" placeholder='User Email' /> 
 
     <button>ADD</button> 
 
     </div> 
 
     <!--sub_box_2--> 
 
    </div> 
 
    <!--2--> 
 

 
    <div id="3" class="box"> 
 
     <b>Box 3</b> 
 
     <div id="sub_box_3" class="sub_box"> 
 
     <input type="text" name="user_phone" placeholder='User Phone' /> 
 
     <button>ADD</button> 
 
     </div> 
 
     <!--sub_box_3--> 
 
    </div> 
 
    <!--3--> 
 

 
    </div> 
 
    <!--wrapp--> 
 
</body> 
 

 
</html>

來源

2017-01-09 20:22:22

非常感謝。這是工作。 – user3559269

@ user3559269不客氣，請將其標記爲未來參考的正確答案 –

jQuery和HTML - 點擊當前的div box id來顯示sub dvi box的內容

回答

相關問題