Менять текст и цвет кнопки с jQuery

У меня есть эти кнопки, которые я произвожу согласно количеству реестров (которые я приношу из базы данных) с одним ng-repeat AngularJS, и я хочу, чтобы в момент помещения мыши они сверху перешли к тому, чтобы быть зелеными (как кнопка success bootstrap), и который вместо "Lost" сказали "Found". Как могло бы делать это с jQuery? Уже я протестировал несколько коды других посмотрим они я функционировали и они не функционировали.

Кнопки: introducir la descripción de la imagen aquí

И здесь я оставляю им часть index.html, где я произвожу кнопки:


    

View the list of Missing Dogs

Name Race Description Place ¿Found?
{{ mascota.nombre }} {{ mascota.raza }} {{ mascota.descripcion }} {{ mascota.lugar }}

EDIT: Я добавляю код, который я не функционировал, думаю, что он находится в языке сценариев JavaScript.

$(document).ready(function() {
    $('.btn').hover(function() {
            $(this).html('Found');
        }, function() {
            $(this).html('Lost'); 
        });
});

6
задан 28.09.2016, 03:58
4 ответа

Есть большие способы это делать. Я предлагаю тебе динамическую альтернативу с data-hover. Так, только определи текст, который ты хочешь показать в hover.

jQuery

$('.btn.lost').hover(onHover, onLeave);

function onHover() {
  $(this).removeClass('lost');
  $(this).addClass('found');
  $(this).text($(this).attr('on-hover'));
}
function onLeave() {
  $(this).removeClass('found');
  $(this).addClass('lost');
  $(this).text($(this).attr('on-leave'));
}
.btn {
  border-radius: 2px;
  padding: .5rem .9rem;
}
.btn:focus {
  outline: none;
}
.btn.lost {
  background-color: #e74c3c;
  border: 1px solid #e74c3c;
  color: #fff;
}
.btn.found {
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <button class="btn lost" on-leave="Lost" on-hover="Found">Lost</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

AngularJS и CSS

Так как ты используешь Угловой, ты можешь использовать ng-mouseover и ng-mouseleave чтобы распределять ему класс в этих состояниях. Также, чтобы менять одинокий текст, ты нуждаешься в признаках data- и снабжать ссылками их посредством свойства CSS content.

.btn {
  border-radius: 2px;
  padding: .5rem .9rem;
  position: relative;
}
.btn:focus {
  outline: none;
}
.btn.lost {
  background-color: #e74c3c;
  border: 1px solid #e74c3c;
  color: #fff;
}
.btn.lost:after {
  content: attr(on-leave);
}
.btn.found {
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
  color: #fff;
}
.btn.found:after {
  content: attr(on-hover);
}
<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <button 
    class="btn lost"
    ng-class="{found: hover}" 
    ng-mouseenter="hover = true"
    ng-mouseleave="hover = false"
    on-hover="Found"
    on-leave="Lost"
  ></button>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

</body>
</html>
4
ответ дан 24.11.2019, 13:16
  • 1
    Ответ м и # 225; s заверши, спасибо за выборы. Я протестирую их и прокомментирую, чтобы видеть, как он я пошел. Так или иначе, podr и # 237; чтобы способствовать тому, чтобы он не изменил tama и # 241; или bot и # 243; n?? – Augusto Herbel 28.09.2016, 03:52
  • 2
    tama и # 241; или изменись из-за tama и # 241; или текста. Если ты помещаешь ему установленную ширину, где поместились оба текста tama и # 241; или не меняться и # 225;. Tambi и # 233; n ты можешь использовать text-overflow: ellipsis; и white-space: nowrap; для того, чтобы они явились приостанавливающими точками. – gugadev 28.09.2016, 04:12
  • 3
    Эта была та и #250; nica ответ, который прошел меня. Из всех форм я появляется сомнение, и #191; если я помещаю ему установленную ширину для того, чтобы поместились 2 слова, как я делаю, чтобы это делать responsive? – Augusto Herbel 28.09.2016, 07:40
  • 4
    @AugustoHerbel Ширина bot и # 243; n в общем он не вмешивается со скажи себе и # 241; или responsivo. В самом деле, когда мы делаем кнопки в м и # 243; подлый он склоняется к тому, чтобы увеличиваться (как который мы меняем масштаб изображения Веба), для того, чтобы он смог, я повернул хорошо. – gugadev 28.09.2016, 13:10
  • 5
    Тогда хороший, гениальный Ahh. Большое спасибо из-за ответа =D @Mitsu Gami – Augusto Herbel 28.09.2016, 20:51

Уже у тебя есть несколько ответов с JavaScript/jQuery, я буду помещать тебе одну, в которой только нуждается CSS без необходимости чего-либо больше.

Идея состоит в том, чтобы использовать ::after (или ::before) чтобы менять контент текста кнопки, и применять цвета класса .btn-success, когда пройдет мышь (:hover) над кнопкой:

.btn-danger span::after {
  content:"Lost";
}

.btn-danger:hover {
  color:#fff;
  background-color:#5cb85c !important;
  border-color:#4cae4c !important;
}

.btn-danger:hover span::after {
  content:"Found";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)"><span></span></button>

Подробное объяснение (как он требуется в комментариях)

::after это псевдо-элемент, который соответствовал бы последнему виртуальному сыну, у которого был элемент, к которому он он добавляется. И он используется, чтобы добавлять контент в конце отборного элемента. Стоимость, которую ты помещаешь в свойство content это будет текст, который он появится.

То, что делает это решение, состоит в том, что он удаляет текст "Lost" и "Found" в HTML и тогда это добавляет через псевдо-элемент ::after. В нормальном состоянии текстом будет "Lost":

.btn-danger span::after {
  content:"Lost";
}

Сейчас, когда мышь пройдет над кнопкой, мы хотим, чтобы текст изменился "Found". Для этого мы используем псевдо-класс :hover, что появляется, когда пользователь помещает мышь на элементе. В этом случае, когда пользователь помещает мышь на кнопке btn-danger мы хотим, что ::after измените стоимость, тогда это получается делая .btn-danger:hover span::after:

.btn-danger:hover span::after {
  content:"Found";
}

В конце концов, также мы хотим изменить цвет кнопки, когда будет нажата мышь сверху, и для этого также мы используем уже упомянутого :hover (я получил правильные цвета от CSS Bootstrap):

.btn-danger:hover {
  color:#fff;
  background-color:#5cb85c !important;
  border-color:#4cae4c !important;
}

Я надеюсь объяснить это хорошо. Скажи мне, нуждаешься ли ты в помощи понимая что-то.

1
ответ дан 24.11.2019, 13:16
  • 1
    Я encant и # 243; этот soluci и # 243; n, из-за того, что - м и # 225; s простой с моей точки зрения, и потому что он делает точно то, что я хочу, не будучи должен менять ни классов, ни ничего на меня c и # 243; я говорю оригинал, только добавляя CSS. Так или иначе, я podr и # 237; схвати объяснять немного м и # 225; s в детали, поскольку функционирует этот c и # 243; я говорю? Я быть и # 237; в большой помощи. Спасибо. – Augusto Herbel 28.09.2016, 03:46
  • 2
    Ах, и если он может быть, у меня есть другое сомнение, которое он выдвигает в другом вопросе ( es.stackoverflow.com/questions/25104/… ), что я очень нравиться и # 237; которого ты видел, возможно ли, так как у меня не был ответ никого, и на самом деле я нуждаюсь в том, чтобы решить это, он для доказательства работы. Я быть и # 237; в большого количества помощи. Большое спасибо @Alvaro Montoro – Augusto Herbel 28.09.2016, 04:00
  • 3
    @AugustoHerbel я издал ответ для в и # 241; adir descripci и # 243; n м и # 225; s подробно описанная. Я надеюсь, что он помогает тебе. Потом я смотрю другой вопрос, сейчас иду немного зянятым – Alvaro Montoro♦ 28.09.2016, 04:28

Чтобы добиваться того, что ты хочешь сделать, можешь использовать функцию hover() из jQuery, чтобы захватывать события, когда ты перемещаешь мышь из-за botГіn, и когда он выходит botГіn, что ты должен делать, состоит в том, чтобы производить один пойдите Гєnico для каждый botГіn.

$(".btn-danger").hover(
  function() {
    $(this).css( "background-color", "#0f0");
    $( this ).text("Found");
  }, function() {
    $(this).css( "background-color", "#da4f49");
    $( this ).text("Lost");
  }
);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Boton</title>
</head>
<body>
<!-- MAIN CONTENT -->
    <div id="mainContent" class="container-fluid">
    <!-- aca hay 2 section más antes de la lista -->
<!-- LIST OF MISSING DOGS -->
                <section id="view"  class="row row-content" ng-controller="MainController">
                    <div class="col-xs-offset-3 col-xs-7 well">
                        <div class="col-xs-offset-3 col-xs-9">
                            <h1>View the list of Missing Dogs</h1>
                        </div>
                        <div class="col-xs-offset-2 col-xs-10">
                            <div class="form-group">
                                <label for="race" class="control-label col-xs-11 col-xs-offset-1">Search by race: </label>
                                <div class="col-xs-8 col-xs-offset-1">
                                    <input class="form-control" name="race" type="text" required placeholder="Race of the dogs you are looking for" ng-model="query"/>
                                </div>
                            </div>

                            <div class="col-xs-10">
                                <table class="table table-striped table-responsive" ng-show="mascotas.length > 0 && mascotas != null">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Race</th>
                                            <th>Description</th>
                                            <th>Place</th>
                                            <th>¿Found?</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="mascota in mascotas | filter: {raza : query}">
                                            <td>{{ mascota.nombre }}</td>
                                            <td>{{ mascota.raza }}</td>
                                            <td>{{ mascota.descripcion }}</td>
                                            <td>{{ mascota.lugar }}</td>
                                            <td><button class="btn btn-danger btn-block" ng-click="encontrado(mascota.id)" id="testbtn"><span>Lost</span></button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
        </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

  
</body>
</html>

, Поскольку ты можешь замечать, я добавил, что вас пойдите в botГіn в этом случае

id="testbtn"

TГє podrГ-эксперт делать один одним, пойдите Гєnico с id амулетов и делать что-то похожим.

1
ответ дан 24.11.2019, 13:16
  • 1
    Только пятнистая половина bot и # 243; n зелени. Нижняя часть – Augusto Herbel 28.09.2016, 03:44

Я верю в то, что с этим deberГ, - чтобы функционировать, наложив указатель:

$('.btn').on('mouseenter',function(){
  $(this).removeClass('btn-danger').addClass('btn-primary').find('span').text('found');
});

Это функционирует, когда указатель выходит:

$('.btn').on('mouseleave',function(){
  $(this).removeClass('btn-primary').addClass('btn-danger').find('span').text('lost');
});

Первое, что я делаю, состоит в том, чтобы издавать css button для despuГ©s менять имя этикетки span.

оставил Тебе пример функционируя с jQuery:

$('.btn').on('mouseenter',function(){
      $(this).removeClass('btn-danger').addClass('btn-primary').find('span').text('found');
    });

    $('.btn').on('mouseleave',function(){
      $(this).removeClass('btn-primary').addClass('btn-danger').find('span').text('lost');
    });
button{
  width:75px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn btn-danger'><span>lost</span></button>
<button class='btn btn-danger'><span>lost</span></button>
<button class='btn btn-danger'><span>lost</span></button>
1
ответ дан 24.11.2019, 13:16
  • 1
    Мне нравится этот soluci и # 243; n, только, который меняет tama и # 241; или bot и # 243; n и я нравиться и # 237; которому я не изменился. – Augusto Herbel 28.09.2016, 03:48
  • 2
    @AugustoHerbel ты можешь предопределять ширину уже будьте прямым с jquery или с css, даже укрытый с признаком style, snippet изданный – JuankGlezz 28.09.2016, 04:49

Теги

Похожие вопросы