Question

我正在学习JavaScript语言，我想重现一些东西。我有一个名为“暂停”的文字，我想这样，在点击时，另一个文字将其替换为“播放”。

这是我的JavaScript代码：

(function($) {
    $('#slideshow-pause-icon').click(function(e) {
        e.preventDefault();
        $('#slideshow, #slider, figcaption, #timeline').toggleClass('slideshow-pause');
    });
})(jQuery);

这是我的HTML代码：

<div id="slideshow">
    <span id="slideshow-pause-icon" title="Click to pause">Pause</span>
    <div id="slideshow-container">
        <div id="slider">
            <figure>
                <a href="style-1.php">
                    <img src="images/image-1.jpg" alt="">
                    <figcaption>Style 1</figcaption>
                </a>
            </figure>
            <figure>
                <a href="style-2.php">
                    <img src="images/image-2.jpg" alt="">
                    <figcaption>Style 2</figcaption>
                </a>
            </figure>
            <figure>
                <a href="style-3.php">
                    <img src="images/image-3.jpg" alt="">
                    <figcaption>Style 3</figcaption>
                </a>
            </figure>
            <figure>
                <a href="style-4.php">
                    <img src="images/image-4.jpg" alt="">
                    <figcaption>Style 4</figcaption>
                </a>
            </figure>
        </div>
        <span id="timeline"></span>
    </div>
</div>

目前，当我点击“暂停”文字时：http://i.stack.imgur.com/UYg7h.png

显示slideshow-pause类，它有这个CSS：

.slideshow-pause
{
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important;
}

使用JavaScript，我希望点击“暂停”文字，我的范围ID slideshow-pause-icon将替换为以下内容：

<span id="slideshow-play-icon" title="Click to play">Play</span>

感谢。

Answer 1

    $(document).on("click", "#slideshow-pause-icon, #slideshow-play-icon", function(){

       $(this).html()=="Play"?$(this).html("Pause"):$(this).html("Play");
       this.id= (this.id=="slideshow-pause-icon"?"slideshow-play-icon":"slideshow-pause-icon");
       this.title = (this.title=="Click to pause"?"Click to play":"Click to pause");
       $("#slideshow, #slider, figcaption, #timeline").toggleClass("slideshow-pause");

    });

这对你有用。

Answer 2

使用JQuery非常简单：

$("#slideshow-play-icon").text("Pause");

Answer 3

你可以这样做。只需检查它是否具有用于驱动文本的类。看起来这是在播放图片库吗？

$('#slideshow-pause-icon').click(function()
{
	var $this = $(this);
	if($this.hasClass('slideshow-pause'))
	{
		$this.removeClass('slideshow-pause').text('Play');
                //do something else to play the image gallery
	}
	else
	{
		$this.addClass('slideshow-pause').text('Pause');
               //do something else to pause the image gallery
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideshow">
    <span id="slideshow-pause-icon" class='slideshow-pause' title="Click to pause">Pause</span>
</div>

JavaScript：如何在点击时更改项目的文字？

3 个答案: