如何用我的代码更改p元素的内容？

Question

我尝试过在网上找到的各种代码，但我无法将其与代码结合使用。

序列：

1. 网站 - 用户将书籍图片悬停，整本书滑入视口。
2. 访问者点击图片并更改背景图片
3. 缺失：我想将p-Element的内容从 1/2 （页面）更改为 2/2 （页面），如果背景颜色已经改变。

我该怎么做？

＆＃13;
＆＃13;
// MY CSS

#img_tulip-book-01 {
    position: absolute;
    background: url("../pictures/tulip-book-1.png") no-repeat center right;
    background-size: contain!important;
    top: 700px;
    left: -550px;
    height: 700px;
    width: 480px;
    cursor: pointer;
    z-index: 200;
}


.img_tulip-book-02 {
    background: url("../pictures/tulip-book-2.png") 
    no-repeat center right!important;
    background-size: contain!important;
    cursor: pointer;
}
＆＃13;
// MY HTML

            <div id="img_tulip-book-01">
                <p class="italic2 black" style="position: absolute; right: 0px">1/2</p>

            </div>  
＆＃13;
// MY jQUERY

<script>

        $(document).ready(function() {
            $('#img_tulip-book-01').mouseenter(function() {
                $(this).animate({
                            left: '+=280px'},
                        {
                            duration: "slow",
                            easing: "easein"
                        });

            });
            $('#img_tulip-book-01').mouseleave(function() {
                $(this).animate({
                    left: '-=280px'
                });

            });


            $('#img_tulip-book-01').click(function() {

                $(this).toggleClass('img_tulip-book-02');

            });

        });
</script>  
＆＃13;
＆＃13;
＆＃13;

Answer 1

$(this).find("p").text("2/2");

这一行就是这样做的。

它应该在：

$('#img_tulip-book-01').click(function() {
   $(this).toggleClass('img_tulip-book-02');
   $(this).find("p").text("2/2");
});

Answer 2

这应该有效：

$('#img_tulip-book-01').click(function() {
   $(this).toggleClass('img_tulip-book-02');
   var pageNumber = $(this).find("p").text()
   if (pageNumber == "1/2") {
     $(this).find("p").text("2/2");
   } else {
     $(this).find("p").text("1/2");
   }
});