Как изменить текст кнопки onclick?

у меня есть jQuery slideToggle, который я использую для отображения и скрытия определенного контента. Он всегда показывает стрелку, указывающую вниз, но если щелкнуть и показать текст, стрелка должна быть направлена вверх. В любом случае, чтобы сделать это?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle();
        });
    });
</script>


<button>↓</button>
<p>Wow!</p>

</body>
</html>
9
html javascript jquery

8 ответов

попробуйте это будет работать:

изменить html content кнопки на slideToggle().

HTML-код :

<button id="up">&#8593;</button>
<p>Wow!</p>

JQuery:

$(document).ready(function(){
    $("button").click(function(){
   var arrowId = $(this).attr('id');
   if (arrowId == 'up') {
     $("button").html('&#8595');
     $(this).attr('id','down');
     } else {
     $("button").html('&#8593');
     $(this).attr('id','up');
     }
        $("p").slideToggle();
    });
});

демо : https://jsfiddle.net/64a6fafh/1/

1

Как просто!

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).html("&#8593;");
    toggled = true;
  } else {
    $(this).html("&#8595;");
    toggled = false;
  }

  $("p").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>
6

Рабочая Демо 

$(document).ready(function() {
  $("button").click(function() {
    $("p").slideToggle();
    $(this).toggleClass('down up');

  });
});
.down {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
  height: 130px;
  width: 130px;
}
.up {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png");
  height: 130px;
  width: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="down"></button>
<p>Wow!</p>
3

попробуйте что-то вроде этого.. :)

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
        $( this ).text('NewButtonText');
    });
});
2

Это решение проверяет, имеет ли кнопка стрелку, указывающую "вверх", если да, заменяет ее на "вниз", и наоборот.

    $(document).ready(function(){
        $("button").click(function(){
            if ($(this).text() == 'up'){
                $(this).html('&#8595;')
            }else{
                $(this).html('up');
            }
            $("p").slideToggle();
        });
    });

https://jsfiddle.net/gogaa33d/

2

использовать $("button").text('Button Clicked'); чтобы изменить текст вашей кнопки onclick

$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
    $("button").text('Button Clicked');
  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>
1

мой ответ основан на Jorrex это. Я фанат того, чтобы сделать код коротким и читаемым. Простая логика должна быть простым кодом. ИМО следующий пример легче читать, особенно если у вас много кода в ваш файл.

кроме того, вы можете так же легко использовать простой Javascript для этого, что делает его более легким.

var toggled = false;
$("button").click(function() {
    this.innerHTML = !toggled ? "&#8593;" : "&#8595;";

    toggled = !toggled; // flip the value
    $("p").slideToggle();
});
0

предложение, основанное на @Jorrex это!--5--> выше.

вы также можете использовать, например, класс button вместо переменной:

$("button").click(function() {
  if (!$(this).hasClass('toggled')) {
    $(this).html("&#8593;");
  } else {
    $(this).html("&#8595;");
  }
  $(this).toggleClass('toggled');
  $("p").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

таким образом, было бы намного проще, если нужно более одной такой кнопки на одной странице.

Edit: даже если вы не планируете использовать более одной такой кнопки на странице, все равно безопаснее не использовать переменную здесь, потому что любой другой функция внутри $(document).ready(function(){ может помешать этой переменной - и заставить вас тратить свое время, пытаясь понять, почему " эти странные вещи "(см. ) происходит. (Хотя ошибка может показаться очевидной в этом примере, такие ошибки становятся намного труднее обнаружить, когда ваша кодовая база растет.)

0