0

Feeling like I'm the cusp of understanding Jqueries selectors and element handling - just not quite there yet!

The following html is being cloned so the user can add different issues, what I'm trying to do is add the class results to the last div so that I can display the results in the correct div. But when I hover over the element nothing changes, no javascript errors are being flagged so I presume its a case of my targeting the wrong element with my cack handed code.

Itd be really useful if someone could point me in the right direction for a decent tutorial on jquery selectors, have been reviewing the developer docs but without someone standing over my shoulder explaining stuff, some of the concepts and terminology can be hard to get your head round.

<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>

This is my Javascript code 

$(".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);
        };
});
4

2 回答 2

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');
    }
);
于 2013-05-17T09:58:10.030 回答
0

If you don't get any errors that might mean that your script is not executed. I would try to do something like this:

  $(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);
        };
    });
    })
于 2013-05-17T10:03:13.173 回答