Добавить / вычесть число

Я получил эту работу, чтобы добавить / минус число в поле ввода.

Однако я хочу, чтобы результат отображался в <p class = "qty1"></p>, а не в поле input.

Я попытался сделать это сам, используя innerHTML, но не смог заставить его работать.

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.val(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class = "form-height">
  <input id = "qty1" type = "text" readonly value = "5" class = "qty form-control" />
  <p class = "qty1"></p>
  <img src = "images/minus.png" id = "minus1" width = "20" height = "20" class = "minus" />
  <img id = "add1" src = "images/plus.png" width = "20" height = "20" class = "add" />                  
</div>
<hr />
<div class = "form-height">
  <input id = "qty2" type = "text" readonly value = "7" class = "qty form-control" />
  <p class = "qty2"></p>
  <img src = "images/minus.png" id = "minus1" width = "20" height = "20" class = "minus" />
  <img id = "add1" src = "images/plus.png" width = "20" height = "20" class = "add" />                  
</div>

Смотрите здесь: stackoverflow.com/questions/935956/…

— 25.08.2018 05:36

Тег Ankush <p> имеет класс, а вход имеет значительный идентификатор.

— 25.08.2018 05:39

javascript jquery

25.08.2018 05:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать .html () или .text (), чтобы добавить значение к тегу p, например

$('.qty1').html(currentValue);

ИЛИ

$('.qty1').text(currentValue);

Чтобы узнать разницу между двумя методами кликните сюда

Где мне добавить / заменить эту строку?

— 25.08.2018 05:51

25.08.2018 05:40

Ответ принят как подходящий

Если я правильно понимаю ваш вопрос, этот код должен делать то, что вы хотите:

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    if (!isNaN(currentVal)) {
        newVal = isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal);
        $p.text(newVal);
        $qty.val(newVal);
    }
  });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class = "form-height">
  <input id = "qty1" type = "text" readonly value = "5" class = "qty form-control" />
  <p class = "qty1"></p>
  <img src = "images/minus.png" id = "minus1" width = "20" height = "20" class = "minus" />
  <img id = "add1" src = "images/plus.png" width = "20" height = "20" class = "add" />                  
</div>
<hr />
<div class = "form-height">
  <input id = "qty2" type = "text" readonly value = "7" class = "qty form-control" />
  <p class = "qty2"></p>
  <img src = "images/minus.png" id = "minus1" width = "20" height = "20" class = "minus" />
  <img id = "add1" src = "images/plus.png" width = "20" height = "20" class = "add" />                  
</div>

Редактировать Если тег <input> должен быть полностью удален, это требует лишь незначительной модификации вашего кода:

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.text()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.text(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class = "form-height">
  <p class = "qty">5</p>
  <img src = "images/minus.png" id = "minus1" width = "20" height = "20" class = "minus" />
  <img id = "add1" src = "images/plus.png" width = "20" height = "20" class = "add" />                  
</div>
<hr />
<div class = "form-height">
  <p class = "qty">7</p>
  <img src = "images/minus.png" id = "minus1" width = "20" height = "20" class = "minus" />
  <img id = "add1" src = "images/plus.png" width = "20" height = "20" class = "add" />                  
</div>

Это работает только при наличии поля ввода. Мне нужно удалить поле ввода. Спасибо.

— 25.08.2018 05:50

Вы имеете в виду полностью удалить поле ввода?

— 25.08.2018 05:51

да. Я фактически добавил это поле ввода как существующий рабочий код. Мне нужно удалить поле ввода и добавить только <p>.

— 25.08.2018 05:53

Хорошо, я добавил правку, которая удаляет <input>. Я думаю, ты должен делать то, что хочешь.

— 25.08.2018 05:59

Большое спасибо! Это здорово. Я все еще учусь использовать val (), innerHTML и тому подобное. Так запутанно! :)

— 25.08.2018 06:01

Ага - так много терминов для того, что в значительной степени одно и то же. Рад, что смог помочь.

— 25.08.2018 06:12

25.08.2018 05:45

Другие вопросы по теме

Селектор начальной загрузки jquery внутри всплывающего окна

Ошибка 404 при получении JSON из Instagram Graph

Отключить ввод из модального окна при нажатии кнопки

Как выбрать все элементы, у которых есть частичное совпадение строк с помощью jQuery

Отображение изображений в случайном порядке / в случайном порядке на нескольких ползунках

Как добавить данные в JSON через Datatables и Node.js?

Есть ли лучший способ обрабатывать загрузку файлов AJAX с помощью Django?

Как повторно привязать прослушиватель событий к элементам, которые удаляются и добавляются снова

Назначение функции JQuery по щелчку в цикле For

Выравнивание содержимого пузыря чата по правому краю

Добавить / вычесть число

Ответы 2

Другие вопросы по теме

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