Question

我正在尝试使用 .info_toggle 条件在 if 类中切换文本。我很困惑，如果有人可以帮助我理解我当前的代码为什么不起作用，我将不胜感激。

JS：

$( '.info_toggle').click(function() {
  $("body").toggleClass( "info-page-open" );
});


if ('info-page-open') {
  $('.info_toggle').text('CLOSE');
} else  {
  $('.info_toggle').text('INFO');
}

CSS：

.info_toggle {
    position: absolute;
    top:15px;
    left:20px;
    z-index: 6;
    color: #000;
}


.info-page {
    width: 100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    background-color: rgb(0,0,0, .5);
    z-index: 5;
    opacity: 0;
    z-index: 0;
    transition: all 0.25s ease-in;
}

body.info-page-open .info-page {
    opacity: 1.0;
    z-index: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>

<a href="#" class="info_toggle">INFO
    </a>

  <div class="info-page">
  </div>

</body>

Answer 1

您遇到两个问题：

您没有使用 if statement 正确检查元素是否具有 class info-page-open 。
您需要将 if statement 包装在点击 method 内，以切换class。

您可以使用以下代码段：

$( '.info_toggle').click(function() {
  $("body").toggleClass( "info-page-open" );

  if ($("body").hasClass('info-page-open')) {
    $('.info_toggle').text('CLOSE');
  } else  {
    $('.info_toggle').text('INFO');
  }
});

Answer 2

由于此行，您的代码有问题：

if ('info-page-open') { <-----

这意味着什么？您是不是条件正在评估字符串“ info-page-open”，而不是要检查的元素。

您应该做的（这是通过猜测）是找到具有“ info-page-open”类的元素，并询问是否在classList中找到了info-page-open类。

您可以通过点标记（yourElement.classList）访问classList

Answer 3

我认为这可以解决您的问题：

	$( '.info_toggle').click(function() {
  		$("body").toggleClass( "info-page-open" );
  		if ($('body').hasClass('info-page-open')) {
			$('.info_toggle').text('CLOSE');
		} else  {
			$('.info_toggle').text('INFO');
		}
	});

.info_toggle {
	position: absolute;
	top:15px;
	left:20px;
	z-index: 6;
	color: #000;
}


.info-page {
	width: 100%;
	height:100%;
	position: absolute;
	top:0px;
	left:0px;
	background-color: rgb(0,0,0, .5);
	z-index: 5;
    opacity: 0;
	z-index: 0;
	transition: all 0.25s ease-in;
}

body.info-page-open .info-page {
	opacity: 1.0;
	z-index: 5;
}

<body>

<a href="#" class="info_toggle">INFO
	</a>
  
  <div class="info-page">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
</body>

如果元素hasClass更改innerHTML

3 个答案: