顯示/隱藏列表選擇所有而不是單獨

已按照我下面的代碼，其中顯示和隱藏元件按鈕被點擊：顯示/隱藏列表選擇所有而不是單獨

HTML：

<div class="largeImage"> 
    <div class="uploadItem.NameContainer"> 
     <img src="thumbNail1.jpg" alt="thumbNail1.jpg"/> 
    </div> 
    <div class="galleryButtonContainer"> 
     <div class="editButton"> 
      <input type="button" value="Click to Rename" /> 
     </div> 
     <div class="cancelRenameButton"> 
      <input type="button" value="Cancel Rename" /> 
     </div> 
     <div class="renameButton" > 
       <input type="submit" value="Rename" /> 
     </div> 
     <div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div> 
     <div class="deleteButton"> 
       <input type="submit" value="Delete" /> 
     </div> 
    </div> 
</div> 

<div class="largeImage"> 
    <div class="uploadItem.NameContainer"> 
     <img src="thumbNail2.jpg" alt="thumbNail2.jpg"/> 
    </div> 
    <div class="galleryButtonContainer"> 
     <div class="editButton"> 
      <input type="button" value="Click to Rename" /> 
     </div> 
     <div class="cancelRenameButton"> 
      <input type="button" value="Cancel Rename" /> 
     </div> 
     <div class="renameButton" > 
       <input type="submit" value="Rename" /> 
     </div> 
     <div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div> 
     <div class="deleteButton"> 
       <input type="submit" value="Delete" /> 
     </div> 
    </div> 
</div>

CSS：

.galleryButtonContainer .cancelRenameButton {display:none;} 
.galleryButtonContainer .renameButton {display:none;}

查詢：

$(".editButton").click(function() { 
    $(".renameButton,.cancelRenameButton").show(); 
    $(".editButton").hide(); 
}); 
$(".cancelRenameButton").click(function() { 
    $(".renameButton,.cancelRenameButton").hide(); 
    $(".editButton").show(); 
});

我得到的問題是我無法讓按鈕單獨工作。

$(".editButton").click(function() { 
    $(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").show(); 
    $(this).parents(".largeImage").find(".editButton").hide(); 
}); 
$(".cancelRenameButton").click(function() { 
    $(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").hide(); 
    $(this).parents(".largeImage").find(".editButton").show(); 
});

來源

2014-09-05 user2151345

你是什麼意思，「***不能讓按鈕單獨工作***」？你隱藏頁面中的所有按鈕？ – 2014-09-05 15:25:06

嘗試是這樣的嘗試（如果您願意，請保留hide和show）。

JSFiddle here

$(".editButton").click(function() { 
    $(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle(); 

}); 
$(".cancelRenameButton").click(function() { 
    $(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle(); 
});

來源

2014-09-05 15:25:51

第四次找到錯誤點後出現錯字。但是，這工作。 – user2151345 2014-09-05 16:11:04

Thx。不要忘記選擇正確的答案。 – 2014-09-05 17:09:01

你可以簡單地結合使用siblings（！少函數調用）與this遍歷DOM，然後就toggle他們：我一直在使用「這個」沒有成功

來源

2014-09-05 15:26:11 GillesC

我從來不知道兄弟姐妹，所以我+1了。每天都是上學日！ – MightyLampshade 2014-09-05 15:48:41

如果我正確理解什麼ü想做的事情。這可能是一個可能的解決方案：

HTML：

<div class="largeImage"> 
    <div class="uploadItem.NameContainer"> 
     <img src="thumbNail1.jpg" alt="thumbNail1.jpg"/> 
    </div> 
    <div class="galleryButtonContainer"> 

     <div class="editButton" name="form1"> 
      <input type="button" value="Click to Rename"/> 
     </div> 
     <div class="cancelRenameButton" name="form1"> 
      <input type="button" value="Cancel Rename" /> 
     </div> 
     <div class="renameButton" name="form1"> 
       <input type="submit" value="Rename"/> 
     </div> 
     <div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div> 
     <div class="deleteButton"> 
       <input type="submit" value="Delete" /> 
     </div> 
    </div> 
</div> 

<div class="largeImage"> 
    <div class="uploadItem.NameContainer"> 
     <img src="thumbNail2.jpg" alt="thumbNail2.jpg"/> 
    </div> 
    <div class="galleryButtonContainer"> 

     <div class="editButton" name="form2"> 
      <input type="button" value="Click to Rename" /> 
     </div> 
     <div class="cancelRenameButton" name="form2"> 
      <input type="button" value="Cancel Rename" /> 
     </div> 
     <div class="renameButton" name="form2"> 
       <input type="submit" value="Rename" /> 
     </div> 
     <div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div> 
     <div class="deleteButton"> 
       <input type="submit" value="Delete" /> 
     </div> 
    </div> 
</div>

CSS：

.galleryButtonContainer .cancelRenameButton {display:none;} 
.galleryButtonContainer .renameButton {display:none;}

jQuery的：

$(".editButton, .cancelRenameButton").click(function() { 
    Toggle($(this)); 
}); 

function Toggle(obj){ 
    var name = obj.attr("name"); 
    $(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle(); 
    $(".editButton[name="+name+"]").toggle();  
}

檢查這個鏈接jsfiddle看它是如何工作的。更好的解決方案是，我認爲，刪除div並只處理按鈕。

希望它有用！

來源

2014-09-06 11:37:52 Academia

顯示/隱藏列表選擇所有而不是單獨

回答

相關問題