單擊滑動條內的圖像以顯示文字

對我有用[0]丟個板磚[0]引用當我在手機上點擊一個圖像時，它會讓文本出現在它的下面和一個按鈕。然後，如果再次點擊它會消失。單擊滑動條內的圖像以顯示文字

我已經嘗試了JS中的常用方式，但似乎沒有工作。關於如何讓這種事情發生的任何想法都會很棒！

一個例子是這個 - http://jsfiddle.net/ZECTP/但隨着移動的圖像被挖掘。

JS關閉的jsfiddle作爲被要求：作爲被要求

$(function() { 
     var div = $('#showOrHideDiv'); 
     $('#action').click(function() { 
      div.fadeToggle(1000); 
     }); 
    });

HTML關閉的jsfiddle：

<a id="action" href="#">hide/show text</a> 
<div id="showOrHideDiv" style="display: none;">hidden text</div>

它需要除了其是在圖像上的文本，如下文本並且需要出現一個按鈕。

謝謝！

來源

2015-05-21 Max

你的代碼出了什麼問題小提琴似乎在工作？ – brso05

這只是我想要做的一個例子，但它不適用於當前的設置。 – Max

如果我們不知道當前設置，我們將如何幫助您？ – brso05

入住這udpated fiddle

我認爲這是你在找什麼。

HTML

<figure class = "figure"> 
    <img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" /> 
    <figcaption class = "figcaption"> 
     SOME TEXT HERE  
    </figcaption> 
</figure>

CSS

figure { 
    font-size: 100%; 
} 

figcaption { 
    display: none; 
}

jQuery的

$(document).ready(function(){ 
$(".figure").click(function(){ 
    $(".figcaption").toggle(); 
}); 
});

來源

2015-05-21 15:13:33

這是移動文本，我需要的是新鮮的文本出現在圖像上點擊！ – Max

如果你想要這樣的東西，然後檢查我的編輯:)檢查小提琴，它的編輯 –

嘿，男人，試過這個，但給我的圖像我在邊界上使用它，並沒有發生onclick。也許與我使用的滑塊有關？我也移動了滑塊DIV之外的東西，但打破了滑動條，但工作原理如下文所示。 – Max

我檢查你提供圖片的網站的源代碼ided，您需要添加此代碼才能獲得所需的效果。我假設你想在每張圖片上顯示/隱藏文字。

var elems = $('#my_horizontal_main_stage li'); 
elems.find('div').hide(); // text hidden by default, or you can use css 
elems.on('click', function(e){ 
    el = $(this); 
    el.find('div').fadeToggle('fast'); 
})

來源

2015-05-21 15:20:34 victmo

嗨！感謝這一點，但我需要的是出現在下面的新文本，已更新我的原始帖子，以顯示此。 – Max

單擊滑動條內的圖像以顯示文字

回答

相關問題