jQuery沒有顯示點擊請求的數據

這幾乎是一個初學者的問題。我已經綁定了一個點擊事件的小圖標來顯示一些點擊數據。我已經將事件綁定了一百萬次，但這次它並不是出於某種有趣的原因。無論如何，點擊觸發器工作得很好，我已經嘗試在回調中放置一個警報，這是正常的，但它只是我想顯示的東西沒有顯示。jQuery沒有顯示點擊請求的數據

總之，這裏是我的代碼：

<div class="options"> 
    <span id="resize-toggle" class="glyphicon glyphicon-resize-small valign-middle pointer" title="Resize images during the upload"></span> 
    <span id="thumb-toggle" class="glyphicon glyphicon-adjust valign-middle pointer" title="Adjust the output thumnail width measured in pixels"></span> 

    <div id="thumb-options" class="hidden"> 
     &nbsp; 
     <div class="form-group"> 
      <div class="btn-group mg-top" data-toggle="buttons"> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-90" value="90">90</label> 
       <label class="btn btn-default btn-xs active"><input type="radio" id="width-110" value="110">110</label> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-130" value="130">130</label> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-160" value="160">160</label> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-200" value="200">200</label> 
      </div> 
     </div> 
    </div> 
</div>

這是LESS：

.options { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    min-width: 500px; 
    text-align: right; 
    border: 1px solid black; 

    .form-group { 
     display: inline-block; 
     margin: 0; 
    } 

    #thumb-options { 
     display: inline-block; 
    } 
}

因此，#thumb-toggle能爲我們帶來了#thumb-options。我已經嘗試過使用類，但我變得絕望，並開始嘗試使用ID。

我的初衷是讓單選按鈕從右側滑動，沿途推動小字形。

有人能幫我找到問題，爲什麼jQuery不工作，以及如何實現該幻燈片到正確的效果？

這是jQuery的我一直在使用：

$('#thumb-toggle').click(function(){ 
    alert('Here we are'); // Works! 
    $('#thumb-options').fadeIn('fast'); // This doesn't work 
});

來源

2014-01-11 Aborted

也許class =「hidden」力量隱藏div？ – kgd

''（'＃thumb-options'）。removeClass（'hidden'）;'工作？是否有多個ID爲「thumb-options」的div？ –

@Tim是的，那可行！在這種情況下，爲什麼不是'fadeIn'，'toggle'或'show'不工作？ – Aborted

這裏是a jsfiddle什麼是德在下面翻看。這是你工作的簡化版本。

您沒有顯示hidden類，但問題可能是您在invisible的元素上使用FadeIn。如果你想要的元素是不可見的，因此有助於DOM的佈局，那麼你應該使用類似：

$('#thumb-options').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 200);

如果你想使用淡入，那麼你將需要$('#thumb-options')最初有display:none

來源

2014-01-11 21:47:57 acarlon

對不起'.hidden'類。它只有'display：none'。 – Aborted

@Dugi - 那麼應該工作。我的簡化示例在你的頁面中工作嗎？如果確實如此，那麼也許這與LESS轉換爲CSS有關。 – acarlon

第一，嘗試使類「隱藏」，而不是「隱藏」

<div id="thumb-options" class="hide">

，如果它仍然無法正常工作嘗試這樣的：

<div id="thumb-options" style="display:none;">

來源

2014-01-11 21:29:47 erikrunia

我會建議只切換css類，並只用CSS調整可見性。（我也不會用IDS如此廣泛，您可以使用類來代替。）

HTML：

<div id="thumb-toggle">Click me</div> 
<div id="thumb-options" class="hidden"> 
    ... 
</div>

的Javascript：在$thumb_toggler

var $thumb_toggler = $('#thumb-toggle'); 
$thumb_toggler.click(function(){ 
    $thumb_toggler.toggleClass('hidden'); 
});

有了第一次點擊類hidden會從#thumb-options元素中刪除。隨着下一次點擊，hidden類將被追加到它的類的列表中。

來源

2014-01-11 21:48:13 Robin

jQuery沒有顯示點擊請求的數據

回答

相關問題