Нажмите событие на Font-awesome каретку вверх и каретку вниз стека - PullRequest
Новая
       42

Нажмите событие на Font-awesome каретку вверх и каретку вниз стека

0 голосов
/ 21 октября 2019

читаю этот вопрос. Я хотел бы разместить Font-awesome caret up and caret down, как показано ниже.

enter image description here

Мой HTML-код похож на ниже 

<div class="input-group">
  <div class="qty">
    <input type="text" id="remind_number" placeholder="0">
    <div class="new">
     <div class="" id="plus_remind">
       <i class="fas fa-caret-up"></i>
     </div>
     <div class="" id="minus_remind">
        <i class="fas fa-caret-down"></i>
      </div>
     </div>
    </div>
   </div>

Я получаювывод как ниже

enter image description here

Мой код CSS похож на ниже 

#plus_remind {
    margin: 0;
    height: 24px;
    width: 22px;
    font: 33px/1 Arial,sans-serif;
    border: 1px solid red;
    cursor: pointer;
}

#minus_remind {   
    height: 24px;
    margin: 0;
    width: 22px;
    font: 33px/1 Arial,sans-serif;
    border: 1px solid blue;
    cursor: pointer;
}

.new {
    margin-top:0 !important;
}

Мой код jQuery похож на ниже 

        var bmi = 0
        $("#plus_remind").click(function() {
            bmi = bmi + 1;
            $("#remind_number").val(bmi);
        });

        $("#minus_remind").click(function() {
            bmi = bmi - 1;
            $("#remind_number").val(bmi);
        });

Основная проблема заключается в том, что если я нажимаю #plus_remind, значение уменьшается, а если я нажимаю #minus_remind, значение увеличивается.

ОБНОВЛЕНИЕ

СейчасЯ получаю вывод, как показано ниже:

enter image description here

Может кто-нибудь сказать, как я могу разместить синюю рамку в верхней части div рядом с красной рамкой div?

Ответы [ 2 ]

1 голос
/ 21 октября 2019

Может быть несколько проблем, связанных с вашим общим CSS, связанных с позиционированием кареток, но в основном перекрытие приводит к неправильному поведению в вашем случае.

Несколько вещей для проверки -

  1. Все ваше позиционирование правильное с точки зрения absolute позиционируемых элементов, их высоты и ширины.

  2. Проверьте, не использует ли что-то вроде font: 33px/1 Arial,sans-serif; размер элементов.

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

 var bmi = 0
        $("#plus_remind").click(function() {
            bmi = bmi + 1;
            $("#remind_number").val(bmi);
        });

        $("#minus_remind").click(function() {
            bmi = bmi - 1;
            $("#remind_number").val(bmi);
        });
.qty{
  position: relative;
  width: 132px;
}
.new{
  position: absolute;
  top: 2px;
  right: 0;
}
#remind_number{
 height: 32px; 
}
#plus_remind, #minus_remind {
  height: 16px;
  width: 16px;
  cursor: pointer;
}
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
  <div class="qty">
    <input type="text" id="remind_number" placeholder="0">
    <div class="new">
     <div class="" id="plus_remind">
       <i class="fa fa-caret-up"></i>
     </div>
     <div class="" id="minus_remind">
        <i class="fa fa-caret-down"></i>
      </div>
     </div>
    </div>
   </div>
1 голос
/ 21 октября 2019

Ну, я не понимаю, почему вы используете потрясающие шрифты иконки для отображения числа, если вы можете сделать это с одной строкой утверждения в html.

Вместо этого: 

<input type="text" id="remind_number" placeholder="0">

Вы можете напрямую использовать эту 

 <input type="number" id="remind_number" placeholder="0" class="form-control">

. Используя эту разметку HTML, вам не придется писать дополнительный CSS или импортировать для него какой-нибудь необычный шрифт-код. Убедитесь, что в вашем HTML есть все ссылки для начальной загрузки.

...