Question

我有一个名为ieDoc.querySelector("#LinkButton_3 a").Click的div，上面写着“增加文字权重”。

每当单击它时，另一个名为#increase-text-weight的div的内容应为#post-content，而font-weight: 500的文本应更改为“ DECREASE TEXT WEIGHT”。

当div说“减小文字权重”并单击时， #increase-text-weight 应得 #post-content 和的文字 font-weight: 300 应该更改为“增加文字权重”。

我该怎么做？

编辑：

我曾尝试通过#increase-text-weight来做到这一点，但没有成功。

Answer 1

由于您正在学习，所以这是通过两种方式实现此目的的简短方法。

首先，id选择器$（'＃test'）获得节点元素

然后将click事件的侦听器附加到引用。之后，选择器$（this）引用事件附加函数中使用的选择器，在这种情况下，我们可以说$（this）== $（“＃test”）。

在点之后，jQuery .toggleClass（）方法从元素中添加或删除一个类，此外，如果您传递第二个true或false参数，该方法将分别添加或删除给定的类。

因此，如果将这两个toggleClass（）链接起来，则如果不存在则添加该类，如果存在则将其删除

$("#test").click(function(){ // also can be .on('click',function(){ ... })

    $(this).toggleClass("decreased")
    .toggleClass("increased");

});

.decreased {
  font-weight: 100;
  color: red;
  cursor: pointer;
}

.increased {
  font-weight: 300;
  color: green;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test" class="decreased">Increase my font weight!</div>

Answer 2

您只需在要更改的div上使用onClick事件即可执行此操作。每次单击它时，我们都会检查哪个类与该<div>相关联，然后根据该类对该<div>进行必要的修改，例如使用{{1}更新div中的文本内容}，然后像这样切换类：

.text()

var myDiv = $("#test");

myDiv.click(function() {
  if (myDiv.hasClass("decreased")) {
    myDiv.removeClass("decreased")
      .addClass("increased")
      .text("Decrease my font weight!")
  } else {
    myDiv.removeClass("increased")
      .addClass("decreased")
      .text("Increase my font weight!")
  }
});

.decreased {
  font-weight: 100;
  color: red;
  cursor: pointer;
}

.increased {
  font-weight: 300;
  color: green;
  cursor: pointer;
}

尽管您可以像这样使用纯JavaScript轻松地做到这一点：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test" class="decreased">Increase my font weight!</div>

Answer 3

执行此操作的一种快速方法是使用if和else语句。

$('#increase-text-weight').on('click', function() {
    if ($(this).text() === 'INCREASE TEXT WEIGHT') {
    $('#post-content').addClass('highlight');
    $(this).text('DECREASE TEXT WEIGHT');
  } else {
    $(this).text('INCREASE TEXT WEIGHT');
    $('#post-content').removeClass('highlight'); 
  }
});

$('#increase-text-weight').on('click', function() {
	if ($(this).text() === 'INCREASE TEXT WEIGHT') {
    $('#post-content').addClass('highlight');
    $(this).text('DECREASE TEXT WEIGHT');
  } else {
  	$(this).text('INCREASE TEXT WEIGHT');
    $('#post-content').removeClass('highlight'); 
  }
});

div {
  width: 100%;
  height: 100px;
  text-align: center;
  border: 1px solid;
  margin: 0 0 25px 0;
  cursor: pointer;
}

.highlight {
  font-weight: 900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='increase-text-weight'>INCREASE TEXT WEIGHT</div>
<div id='post-content'>Text text and text</div>

单击div时更改div文本和CSS，然后再次单击时撤消更改

3 个答案: