Jquery在悬停时向元素添加属性

时间:2013-05-17 09:53:17

标签: jquery element selector

感觉就像我是理解Jqueries选择器和元素处理的尖端 - 只是还没到那里!

以下html正在被克隆,因此用户可以添加不同的问题,我正在尝试将类结果添加到最后一个div,以便我可以在正确的div中显示结果。但是,当我将鼠标悬停在元素上时,没有任何更改,也没有标记任何javascript错误,因此我假设我的目标是使用我的cack手动代码来定位错误的元素。

如果有人可以指出我在jquery选择器上获得一个体面的教程的正确方向,那将是非常有用的,一直在审查开发人员文档,但没有人站在我的肩膀上解释东西,一些概念和术语可能很难抓住你的头。

<div id="title-wrap1" style="margin-bottom:4px;" class="clonedInput">
    <select name="Issues[]">
        <option selected>Please Select...</option>
            <?php
            while($res = $title->fetch(PDO::FETCH_ASSOC)) { 
                echo "<option value=\"".$res['ID']."\">".$res['Issue']."</option>\n  ";
            }
            ?>
    </select>
    <div>
    </div>
</div>
<div>
    <input type="button" class="btnAdd" value="+" />
    <input type="button" class="btnDel" value="-" />
</div>

这是我的Javascript代码

$(".clonedInput select").hover(
    function () {
        $('.clonedInput div', this).attr('class', 'results');
    });

    $(document).on('change','.clonedInput select',function() {
    var data = {id: $(this).val()};
    $.post('sub_db_handler.php', data, processResponse);
        // var num =  $('.clonedInput').length;

        function processResponse(data) {
            $('.clonedInput .results').html(data);
        };
});

2 个答案:

答案 0 :(得分:1)

我正在重新审视您的问题,您正在使用悬停功能来标记div以接受结果。它可以略有不同

$(document).on('change','.clonedInput select',function() {
    var data = {id: $(this).val()};

    $.post('sub_db_handler.php', data, $.proxy(processResponse, this));

    function processResponse(data) {
        $(this).closest('.clonedInput').find('div').html(data);
        //or $(this).next().html(data); as DerekHenderson pointed out
    };
});

如果您仍想添加结果类

$(".clonedInput select").hover(
    function () {
        $(this).closest('.clonedInput').find('div').addClass('class', 'results');
    }
);

答案 1 :(得分:0)

如果您没有收到任何可能意味着您的脚本未执行的错误。 我会尝试这样做:

  $(document).ready(function () {
   $(".clonedInput select").mouseover(function() {
            $('.clonedInput div', this).attr('class', 'results');
          }
        );

    $(document).on('change','.clonedInput select',function() {
        var data = {id: $(this).val()};
        $.post('sub_db_handler.php', data, processResponse);
        // var num =  $('.clonedInput').length;

        function processResponse(data) {
            $('.clonedInput .results').html(data);
        };
    });
    })