Question

如果我有以下代码：

HTML

<div class ="lg"> <img src="/images/images.gif"> </div>

的javascript

$('.lg').text("Correct");

jquery将删除图像并将其替换为“正确”。这只是在我需要重新出现图像之前的延迟。所以它会闪现正确然后带回原始图像。

Answer 1

在我看来，更清晰的方法是对图像和文本使用不同的类，并分别隐藏/显示它们：

CSS：

.text {
    display: none;
}

HTML：

<div class="lg">
    <div class="image">IMAGE</div>
    <div class="text">Correct</div>
</div>

JavaScript（点击事件或其他内容）：

$(".lg .image").hide();
$(".lg .text").show();

setTimeout(function() {
    $(".lg .image").show();
    $(".lg .text").hide();
}, 1000);

Answer 2

您需要存储旧内容，然后：

var oldhtml = $('.lg').html(); 
// WARNING: will give unexpected results if .lg matches more than one element
$('.lg').text("Correct");
setTimeout(function(){
    $('.lg').html(oldhtml);
}, 1000); // milliseconds

如果有多个关于课程lg的项目，则需要一个循环代替：

$('.lg').each(function() {
    var oldhtml = $(this).html(); 
    $(this).text("Correct");
    setTimeout(function(){
        $(this).html(oldhtml);
    }, 1000); // milliseconds
});

Answer 3

你可以尝试这样的事情。

<div class ="lg"> 
      <img src="/images/images.gif"> 
      <span style="display:none;">correct</span> 
</div>

JS

显示Correct文字

$('.lg').find('img').fadeOut();
$('.lg').find("span").fadeIn();

显示图像

$('.lg').find('img').fadeIn();
$('.lg').find("span").fadeOut();

最后你的代码就像这样。

$('.lg').find('img').fadeOut();
$('.lg').find("span").fadeIn();
setTimeout(function(){
     $('.lg').find('img').fadeIn();
     $('.lg').find("span").fadeOut();
}, 2000);//delay of 2 secs

Answer 4

我建议不要翻转div的html，而是建议在div中使用“Correct”标签和图像，然后打开和关闭其中的两个：

<div class="lg">
    <span id="correctSpan">Correct!</span>
    <img id="image" src="/images/images.gif">
</div>


$(document).ready(function () {
    // hide the correctSpan from the start
    $('#correctSpan').toggle();
});

// in the event handler that toggles the two...
$('#correctSpan, #image').toggle();

Answer 5

您需要将图像（原始文本）保存在字符串中，进行更改，然后再将其更改。

var orig = $('.lg').html(); // This should be .html, not .text
                            // so that it saves the <img/> tag
$('.lg').text('Correct');
// After a delay
setTimeout(function(){
    $('.lg').html(orig);  // Use .html here, so that the <img/> tag will work
}, 1000);

但是，有一种更好的方法可以做到这一点。在其中包含“正确”的跨度，然后隐藏/显示图像和文本。

<div class="lg">
    <img src="/images/images.gif" />
    <span style="display:none;">Correct</span>
</div>

然后在JS：

$('.lg').find('img,span').toggle(); // This will hide the image and show the text
                                   // run it again to change it back

Answer 6

这样的事情怎么样：

CSS：

.hidden { display:none; }

HTML：

<div class="lg">
    <img src="/images/images.gif">
    <span class="hidden">Correct</span>
</div>

JS：

$(".lg").find("img, span").fadeToggle();

Answer 7

所以你必须在超时时再做一次更改。因为改变实际上取代了dom中的对象。

Jquery改变.text（某事）然后带回来

7 个答案: