更改并更改按钮jquery中的文本

时间：2018-04-07 10:41:10

标签： javascript jquery

我想有一个jquery按钮事件，第一次单击一个按钮时，div（带有类.explanation）出现并且文本发生变化，第二次单击它时div被隐藏，文本被隐藏更改回原始文本。我可以做第一部分，但第二部分不起作用。在下面更改 - （toggleClass("hidden") - 到 - .fadeOut... - 也不起作用，所以我认为if和else出了问题。提前感谢< / p> 

$("button:nth-of-type(1)").click(function() {
  if (this.text = "Read Explanation") {
    $(".explanation").fadeIn("slow", function() {});
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
    $(".explanation").toggleClass("hidden");
  }
});

4 个答案:

答案 0 :(得分：2)

更改

if(this.text = "Read Explanation") {

到

if($(this).text() === "Read Explanation") {

演示：

$("button:nth-of-type(1)").click(function() {
  if ($(this).text() === "Read Explanation") {
    //$(".explanation").fadeIn("slow", function() {});
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
  }

  $(".explanation").toggleClass("hidden");
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><button>Read Explanation</button></div>
<div class="explanation hidden">explanation</div>

  1. $(this)是具有text()属性的jquery对象，而this是纯js 在这种情况下，没有text或text()属性的对象。

  2. =是赋值运算符，而===是比较运算符

答案 1 :(得分：1)

您的代码中存在以下几个问题：

  1. this应为$(this)
  2. text应为text()
  3. 您正在if条件中使用赋值运算符。它应该是比较运算符==或严格比较运算符===
  4. 您可以在hidden块
    5. 之外切换if-else课程

    ＆＃13;
    ＆＃13; 
    $( "button:nth-of-type(1)" ).click(function() {
  if($(this).text() == "Read Explanation") {
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
  }
  $(".explanation").toggleClass("hidden");
});
    ＆＃13; 
    .hidden{
 display: none;
}
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='explanation hidden'>Some explanation</div>
<button>Read Explanation</button>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：0)

您无法根据可能发生变化的数据做出决策 如果按钮文本发生变化，您需要更改代码。 通过这种方式，如果按钮文本发生变化，则需要更改数据。 这不是最佳选择，但它可能有效。

https://jsfiddle.net/foo8drb2/8/ 

var data = {
    1: "Read Explanation",
    2: "Hide Explanation"
}
// asssign default id to the text
var id_text = 1; //1 id for "Read Explanation"
// add data attribute to the button
$("button:nth-of-type(1)").attr("data-id-text", id_text);
// event
$("button:nth-of-type(1)").click(function () {
    if ($(this).attr("data-id-text") == 1) {
        //change id_text -> 2 for "Hide Explanation"
        id_text = 2;
        // show hide options
        $(".explanation").fadeIn();
    } else {
        //change id_text -> 1 for "Read Explanation"
        id_text = 1;
        // show hide options
        $(".explanation").fadeOut();
    }
    // change data id
    $(this).attr("data-id-text", id_text);
    // update text
    $(this).text(data[id_text]);
});

答案 3 :(得分：0)

谢谢大家。这似乎是最简单的/接近我的。我改变了Ankit的建议： 这到$（这个） 文字到文字（） =到== 使用 - 淡出 - 而不是 - 隐藏 - 帮助

structure(list(V1 = structure(c(2L, 2L, 2L, 3L, 3L, 4L, 4L, 4L, 
4L, 4L, 4L, 1L, 1L, 1L, 1L, 1L, 1L, 1L), .Label = c("@70L", "0003", 
"001V", "001W"), class = "factor"), VS = structure(c(5L, 6L, 
6L, 5L, 5L, 1L, 1L, 2L, 2L, 3L, 3L, 4L, 4L, 4L, 4L, 4L, 4L, 4L
), .Label = c("CANACCOR", "CLARUS", "DEACON", "MORGAN", "MPARTNER", 
"SPROTTSE"), class = "factor"), V3 = structure(c(9L, 1L, 1L, 
8L, 8L, 3L, 10L, 6L, 4L, 6L, 6L, 5L, 5L, 5L, 7L, 7L, 7L, 2L), .Label = c("HUGHES", 
"J", "K", "MACKAY", "MARTINEZ", "OFIR", "OLCOZ", "PEARLSTEIN", 
"SALZ", "WRIGHT"), class = "factor"), V4 = structure(c(9L, 9L, 
9L, 4L, 4L, 1L, 8L, 6L, 4L, 6L, 6L, 7L, 5L, 5L, 3L, 3L, 3L, 2L
), .Label = c("140321", "150608", "CERDAN", "D", "DE", "E", "J", 
"K", "S"), class = "factor"), V5 = structure(c(9L, 4L, 8L, 7L, 
12L, 2L, 6L, 5L, 11L, 10L, 13L, 3L, 15L, 15L, 14L, 14L, 14L, 
1L), .Label = c("01:25:35", "04:06:40", "100226", "140407", "140515", 
"140714", "140821", "141223", "150112", "150119", "150813", "151016", 
"171115", "J", "O"), class = "factor"), V6 = structure(c(16L, 
1L, 5L, 2L, 13L, 12L, 9L, 8L, 6L, 15L, 3L, 4L, 17L, 17L, 7L, 
10L, 11L, 14L), .Label = c("02:30:50", "02:44:05", "06:48:47", 
"07:12:51", "09:06:13", "09:40:45", "101112", "11:40:00", "12:47:31", 
"120712", "140226", "140609", "15:07:40", "171106", "22:03:46", 
"22:30:45", "J"), class = "factor"), V7 = structure(c(10L, 6L, 
12L, 7L, 11L, 17L, 9L, 8L, 13L, 14L, 15L, 4L, 4L, 5L, 2L, 3L, 
16L, 1L), .Label = c("00:16:05", "01:32:41", "03:19:26", "100708", 
"100910", "141120", "150312", "150515", "160228", "160304", "160411", 
"160715", "160812", "170328", "171115", "22:20:19", "23:06:44"
), class = "factor"), V8 = structure(c(5L, 13L, 7L, 8L, 6L, 18L, 
17L, 9L, 10L, 3L, 4L, 1L, 2L, 16L, 12L, 14L, 15L, 11L), .Label = c("04:51:16", 
"05:09:02", "06:45:14", "06:48:47", "08:38:13", "08:40:35", "08:42:56", 
"09:17:13", "09:27:09", "09:40:02", "1", "120618", "13:55:06", 
"131216", "150417", "21:16:07", "22:57:45", "SPECULATIVE"), class = "factor"), 
    V9 = structure(c(6L, 6L, 8L, 6L, 6L, 10L, 10L, 12L, 10L, 
    1L, 1L, 9L, 2L, 3L, 7L, 5L, 4L, 11L), .Label = c("1", "100910", 
    "101110", "13:07:31", "19:49:59", "2", "21:04:56", "3", "8", 
    "BUY", "OVERWT/ATTRACTIVE", "SPECULATIVE"), class = "factor"), 
    V10 = structure(c(6L, 6L, 8L, 6L, 6L, 2L, 2L, 6L, 2L, 6L, 
    6L, 7L, 1L, 4L, 3L, 5L, 3L, 3L), .Label = c("00:48:28", "1", 
    "2", "21:55:52", "6", "BUY", "EQUALWT/NO", "MARKETPERFORM"
    ), class = "factor"), V11 = structure(c(2L, 2L, 3L, 2L, 2L, 
    9L, 9L, 1L, 9L, 1L, 1L, 8L, 4L, 2L, 7L, 6L, 7L, 5L), .Label = c("1", 
    "2", "3", "6", "BUY", "EQUALWT/IN-LINE", "OVERWT/IN-LINE", 
    "RATING", "STRONG"), class = "factor"), V12 = structure(c(4L, 
    4L, 6L, 4L, 4L, 4L, 4L, 8L, 4L, 8L, 8L, 3L, 5L, 7L, 2L, 3L, 
    2L, 1L), .Label = c("1595", "2", "3", "BUY", "EQUALWT/IN-LINE", 
    "HOLD", "OVERWT/IN-LINE", "STRONG"), class = "factor"), V13 = structure(c(1L, 
    5L, 5L, 1L, 1L, 6L, 6L, 8L, 3L, 8L, 8L, 9L, 4L, 2L, 8L, 9L, 
    8L, 7L), .Label = c("12380", "2", "202", "3", "3764", "406", 
    "56947", "BUY", "HOLD"), class = "factor"), V14 = structure(c(5L, 
    7L, 7L, 4L, 4L, 1L, 1L, 6L, 9L, 8L, 8L, 3L, 11L, 10L, 3L, 
    3L, 3L, 2L), .Label = c("150412", "150608", "1595", "163717", 
    "165426", "202", "57379", "704", "73763", "BUY", "HOLD"), class = "factor"), 
    V15 = structure(c(8L, 4L, 7L, 6L, 10L, 3L, 5L, 2L, 9L, 2L, 
    2L, 12L, 11L, 11L, 12L, 12L, 12L, 1L), .Label = c("01:25:00", 
    "115944", "140319", "140401", "140714", "140820", "141223", 
    "150109", "150813", "151009", "1595", "56947"), class = "factor"), 
    V16 = structure(c(2L, 7L, 3L, 5L, 4L, 16L, 10L, 13L, 6L, 
    14L, 15L, 8L, 17L, 17L, 9L, 11L, 12L, 1L), .Label = c("", 
    "08:00:00", "08:02:00", "08:12:00", "08:16:00", "09:23:00", 
    "10:05:00", "100226", "101111", "12:38:00", "120711", "140226", 
    "140515", "150112", "171115", "23:19:00", "56947"), class = "factor"), 
    V17 = structure(c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 7L, 1L, 4L, 
    2L, 3L, 5L, 6L, 9L, 8L, 10L, 1L), .Label = c("", "06:42:00", 
    "07:12:00", "07:24:00", "100708", "100910", "11:40:00", "19:20:00", 
    "20:03:00", "22:20:00"), class = "factor"), V18 = structure(c(1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 2L, 3L, 1L, 1L, 
    1L, 1L), .Label = c("", "03:14:00", "19:18:00"), class = "factor")), .Names = c("V1", 
"VS", "V3", "V4", "V5", "V6", "V7", "V8", "V9", "V10", "V11", 
"V12", "V13", "V14", "V15", "V16", "V17", "V18"), class = "data.frame", row.names = c(NA, 
-18L))
相关问题
最新问题