Оператор Foreach без Jquery

ProgramBox

Оператор Foreach без Jquery

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Итак, я пытаюсь перемещать элемент каждый раз, когда пользователь нажимает на элемент ввода.

 <script>

$(document).ready(function(){                   
    $('input').each(function(index) {
             var p = $(this).attr('id');
             var position = p.position();   

             $this.focus(function(){    

             $('#desired_equity_help').css("left", position.left - 435 );
                 $('#desired_equity_help').css("top", position.top -20 );
             $('#desired_equity_help').toggle();                            
             });

    });
});

</script>

‘desired_equity_help’ — это элемент, который я пытаюсь переключать и перемещать на основе выбранного элемента ввода. Есть идеи, почему это не работает?

Вот HTML:

 <div id="desired_equity_help" class="form_tooltip" >
                        <div class="tooltip_inner" >            
                            <strong>Desired Equity</strong>
                            <p>Hello World! This is some dummy text.</p>
                        </div>
                    </div>

                    <span class="apply_form_label">Desired:</span><input  style="width:110px" type="text" id="desired_equity" name="desired_equity"/><br/>
                    <span class="apply_form_label">Break:</span><input style="width:110px" type="text" /> at: <input type="text" style="width:110px" /><select><option>Independent Users</option></select><br/>

                    <span class="apply_form_label">Last One:</span><textarea rows="3" cols="50"></textarea>
                </div>

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

2. Они являются элементами ввода, поэтому я использую .focus()

3. Ничто не запускает ваш .each() .

4. В дополнение к комментарию Криса вы устанавливаете p значение, равное id атрибуту elements . Идентификатор не имеет позиции, поэтому ваша переменная position, вероятно, равна нулю или не определена.

5. Может быть проблема с копированием / вставкой, но $this.focus должен быть $ (this). фокус ()

Ответ №1:

Забудьте о foreach и примените событие прямо к селектору вот так…

 $('input').focus(function(){
   var p = $(this);
   var position = p.position();   
   $('#desired_equity_help').css("left", position.left - 435 );
   $('#desired_equity_help').css("top", position.top -20 );
   $('#desired_equity_help').show();                            
});

$('input').blur(function(){
    $('#desired_equity_help').hide();//hide on exit of input
});

Примечание: использование position потребует, чтобы ваш элемент desired_equity_help принадлежал тому же родительскому элементу, что и ваши входные элементы. если это не так, рассмотрите возможность использования offset вместо этого

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

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

3. @Thomas: Какой эффект вы получаете?

4. Подождите, я понял… Я одобрю ответ, как только таймер закончится — спасибо!

5. Я просто забыл обернуть его в $(document). готово(функция(){ оператор

Ответ №2:

Вероятно, это ближе к тому, что вы ищете. У вас была неопределенная переменная, и элемент, вероятно, должен быть show n вместо toggle d .

 $('input').each(function(index) {
    var $this = $(this);
    var position = $this.position();

    $this.focus(function() {
        $('#desired_equity_help').css({"left": position.left   150,
                                       "top": position.top}).show();
    });
});

Демонстрация: http://jsfiddle.net/nEMye /

Ответ №3:

О-о-о, похоже, что вы там много чего делаете, в зависимости от того, что вы хотите сделать, вам не нужны методы each() или toggle() . Вот что я бы сделал:

 $(document).ready(function(){
    $('input').click(function(e){
        var position = $(this).position();
        $('#desired_equity_help')
        .css({"left" : position.left - 435 , 
            "top" : position.top -20 });    
    });
});

Привязывая событие click к входным данным, вы указываете ему выполнять эту функцию при каждом нажатии на ввод. Если вам не нужен метод click, вы можете изменить его на метод focus или любой другой метод, который вам подходит. Метод переключения также не нужен, он более или менее используется для кнопки типа переключателя, кнопки, которую вы нажимаете один раз, и она переходит в одно состояние, а затем после того, как вы нажмете ее снова, она возвращается в предыдущее состояние или что-то в этом роде.

Надеюсь, это поможет!

Метки: Оператор Foreach без Jquery