Question

我正在使用Wordpress，并且我有一个Iframe游戏，我想阻止该游戏在单击按钮（玩游戏）之前运行。

因此，我想在单击游戏时创建一个div区域（类似于按钮），该div区域将显示，并且该div区域消失。

这是我使用的代码：

jQuery(document).ready(function(){
	$('.playbutton').on('click',function(e){e.preventDefault();
	var post_id = jQuery(this).data('id');
	if($('#playgame').attr("onClick")==undefined){
	$('#playgame').css("display","none");
	}
    $('#game').css("display","block");
    jQuery.ajax({
	url:'my_site/wp-admin/admin-ajax.php',
	type:'post',
	data:{action:'display_game',post_id:post_id},
	success:function(response){
	$("#game").html(response);
	}});});});

#playgame {
    height: 200px;
    margin: 0px;
    }
    .playbutton {
    height: 200px;
    cursor: pointer;
    background-color: #353535;
    }
    p.playnowtext {
    font-size: 55px;
    display: inline-block;
    color: #ffc402;
    text-decoration: underline;
    }
    #bashabasha {
    padding: 70px 0;
    text-align: center;
    display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playgame"> 
    <div class="playbutton" data-id="<? echo get_the_ID(); ?>">
    <p class="playnowtext">Play Game</p></div> </div>
    <div id="game">
    <!--?php echo get_game( $post->ID );?-->
    </div>

不幸的是，出问题了，因为div区域与CSS一起出现，但是当我单击Play游戏时，什么也没发生。 div区域仍然存在，并且没有消失，游戏也没有开始运行。

我知道Javascript代码有问题，但我不知道。

非常感谢您的帮助。

Answer 1

好的，从您的描述开始，我试图在没有API响应的情况下实现它，我在此处使用了伪文本（您可以在此处使用响应）。

默认情况下，将始终显示div或您想要的按钮，并且CSS将隐藏游戏区域，一旦您从API调用获得响应，就将内容放入该#game元素中，然后用.show()方法显示它。

检查代码段对您是否有意义。

$(document).ready(function(){
    $('.playbutton').on('click', function(e) {
        e.preventDefault();
        var post_id = $(this).data('id');

        if (typeof ($('#playgame').attr("onClick")) === 'undefined') {
            $('#playgame').css("display", "none");
            console.log('no id found')
        }
        $('#game').css("display", "block");
        $.ajax({
            url: 'my_site/wp-admin/admin-ajax.php',
            type: 'post',
            data: {
                action: 'display_game', post_id: post_id
            },
            success: function (response) {
                $("#game").html(response).show(); // add .show() to show the '#game' element;
            }
        });
    });
});

#playgame {
  height: 200px;
  margin: 0;
}
.playbutton {
  height: 200px;
  cursor: pointer;
  background-color: #353535;
}
p.playnowtext {
  font-size: 55px;
  display: inline-block;
  color: #ffc402;
  text-decoration: underline;
}
#bashabasha {
  padding: 70px 0;
  text-align: center;
  display: none;
}

#game {
  display: none; /* as this is hidden by default and will be shown by javascript */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="playgame">
    <div class="playbutton" data-id="<? echo get_the_ID(); ?>">
        <p class="playnowtext">Play Game</p>
    </div> 
</div>
<div id="game">
    <!--?php echo get_game( $post->ID );?-->
    <!-- let's assume we get our expected contents here through the API request and the bellow content is that  -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <!-- And these are hidden by default -->
    <?php 
    if ( function_exists( 'get_game' ) ){
      echo get_game( $post->ID ); 
    }
    ?>     
</div>

Answer 2

$('#playgame').click(function() {
  $('#playgame, #game').toggle();
});

和CSS：

#game {
  display: none;
}

单击按钮显示内容，然后隐藏该按钮

2 个答案: