时间戳

首页 > 解决方案 > 在按钮单击时显示内容然后隐藏该按钮

javascript - 在按钮单击时显示内容然后隐藏该按钮

问题描述

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

所以我想创建一个 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 一起出现，但是当我点击玩游戏时，什么也没有发生。div 区域仍然存在，并没有消失，游戏也没有开始运行。

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

您的帮助将不胜感激。

标签： javascriptphpcsswordpress

解决方案

好的，根据您的描述，我尝试在没有 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>

推荐阅读