Question

我一直在尝试使用变量作为选择器，但它仅限于一个函数，如何将该变量值传递给其他函数。我是ajax的新手，请帮我解决这个问题。

我尝试了本地存储，但这也没有用。

这是我的HTML代码：

<td class="info-group jname">
    <p class="pro-info-right text-per jname"><?php echo $jsdata['js_fname']; ?></p>
    <div class="edit jname" style="display:none">
        <input class="editbox jname" name="js_fname_edit" value="">
    </div>
    <?php if($this->user_valid == TRUE) {  ?>
    <a href="#"><span title="Edit"  class="edit-icon jname ctrl glyphicon glyphicon-pencil"></span></a>
    <a href="#"><span title="Delete" class="del-icon ctrl glyphicon glyphicon-remove-sign"></span></a>
    <?php } ?>
</td>

<td class="info-group jaddr">
    <p class="pro-info-right text-per jaddr"><?php echo $jsdata['js_address']; ?></p>
    <div class="edit jaddr" style="display:none">
        <input class="editbox jaddr" name="js_fname_edit" value="">
    </div>
    <?php if($this->user_valid == TRUE) {  ?>
    <a href="#"><span title="Edit" class="edit-icon jaddr glyphicon glyphicon-pencil"></span></a>
    <a href="#"><span title="Delete" class="jaddr del-icon glyphicon glyphicon-remove-sign"></span></a>
    <?php } ?>
</td>

JavaScript的：

$(document).ready(function(){
    var slctd;
    $('.info-group').click(function(e) {
        e.preventDefault();
        slctd = ($(this).attr('class').split(' ')[1]);
        $('.'+ slctd +' .text-per').hide();
        $('.'+ slctd +' .ctrl').hide();
        var data = $('.'+ slctd +' .text-per').html();
        $('.'+ slctd +' .edit').show();
        $('.'+ slctd +' .editbox').val(data);
        $('.'+ slctd +' .editbox').focus();//comming up to here
    });
    $('.'+ slctd +' .editbox').mouseup(function(e) {
        e.preventDefault();//not comming here
        return false;
    });
    $('.'+ slctd +' .editbox').change(function(e) {
        alert(slctd);//not comming here
        e.preventDefault();
        $('.'+ slctd +' .edit').hide();
        var js_address = $('.'+ slctd +' .editbox').val();
        var dataString = 'js_address='+ js_address;
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>"+'_'+ slctd +'',
            data: dataString,
            cache: false,
            success: function(html) {
                $('.'+ slctd +' .text-per').html(js_address);
                $('.'+ slctd +' .text-per').show();
            }
        });
    });
    $(document).mouseup(function(e) {
        e.preventDefault();//not comming here
        $('.'+ slctd +' .edit').hide();
        $('.'+ slctd +' .text-per').show();
        $('.'+ slctd +' .ctrl').show();
    });
});

Answer 1

如果在slctd之前未确定$('.info-group').click，则必须将所有依赖slctd的代码放在点击功能中。

$('.info-group').click(function(e) {
    e.preventDefault();

    // this is the ONLY place that slctd is being defined at.
    slctd = ($(this).attr('class').split(' ')[1]);

    $('.'+ slctd +' .text-per').hide();
    $('.'+ slctd +' .ctrl').hide();
    var data = $('.'+ slctd +' .text-per').html();
    $('.'+ slctd +' .edit').show();
    $('.'+ slctd +' .editbox').val(data);
    $('.'+ slctd +' .editbox').focus();//comming up to here

    // PUT ALL OTHER CODE THAT USES slctd HERE
});

由于其他用户问过。请注意这项技术，因为每次点击.info-group时它只会将事件绑定到slctd元素。

您可能希望查看其他技术或解除之前事件的解除绑定：

var current_slctd;

$('.info-group').click(function(e) {
    e.preventDefault();

    // code below will be about binding to new slctd

    // this is the ONLY place that slctd is being defined at.
    var slctd = ($(this).attr('class').split(' ')[1]);

    if (current_slctd == slctd) {
       // return since this value of slctd has already been done
       return;
    } else {
       // UNBIND events on current_slctd
    }

    // start over and bind new events
    current_slctd = slctd;

    $('.'+ slctd +' .text-per').hide();
    $('.'+ slctd +' .ctrl').hide();
    var data = $('.'+ slctd +' .text-per').html();
    $('.'+ slctd +' .edit').show();
    $('.'+ slctd +' .editbox').val(data);
    $('.'+ slctd +' .editbox').focus();//comming up to here

    // PUT ALL OTHER CODE THAT USES slctd HERE
});

Answer 2

这是用其他风格编写的相同代码。这是更有效和更好的代码。

基本上slctd只是.info-group元素，你可以使用上下文选择器通过传递选择器来选择被点击的td内的元素。

$(document).ready(function () {
    // When clicked on the element having class info-group
    $('.info-group').on('click', function (e) {
        e.preventDefault();
        var $this = $(this); // Cache the context for performance

        $this.find('.text-per, .ctrl').hide(); // Hide the elements inside the clicked td matching the classes
        var data = $('.text-per', this).html(); // This is context selector, passing this here will search for .text-per element inside the this i.e. td element
        $('.edit', this).show();
        $('.editbox', this).val(data).focus(); // You can chain methods here
    }).on('mouseup', '.editbox', function (e) {
        // when mouseup of .editbox inside the .info-group
        return false; // preventDefault is not needed when using return false
    }).on('change', '.editbox', function (e) {
        var parentTd = $(this).closest('.info-group'); // Get the parent <td> object, so that this can be used as context for selecting the elements inside it

        $('.edit', parentTd).hide(); // Hide .edit element inside the td
        var value = $('.editbox', parentTd).val();
        var dataString = $('.editbox', parentTd).attr('name') + '=' + value; // Create data-string as Name=Value format

        // Send AJAX request using appropriate data
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>" + '_' + parentTd + '',
            data: dataString,
            cache: false,
            success: function (html) {
                $('.text-per', parentTd).html(value).show(); // Update html after successful completion of ajax
            }
        });
    });

    $(document).mouseup(function (e) {
        e.preventDefault();
        $('.edit').hide();
        $('.text-per').show();
        $('.ctrl').show();
    });
});

Ajax：如何将变量函数传递给另一个jQuery

2 个答案: