在Jquery attr上使用此类

Question

Here is

HTML

<div id="myForm" class="myForm row">
    <div class="form-group row">
        <div class="col-lg-12">
            <div class="col-md-4">
                <label>Nama Teman *</label>
                <input type='text' name='name_friend[]' id='name_friend[]' class='form-control name_friend[]' placeholder='Nama' required />
            </div>
            <div class="col-md-4">
                <label>Nomor Handphone*</label>
                <input type='text' name='nomor_telepon[]' id='nomor_telepon[]' class='form-control nomor_telepon[] telepon phone-email' placeholder='Nomor Telepon' required />
            </div>
            <div class="col-md-4">
                <label>Email</label>
                <input type='email' name='email_friend[]' id='email_friend[]' class='form-control email_friend[] phone-email' placeholder='Email' />
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-lg-12">
            <div class="col-md-4">
                <label>Nama Teman *</label>
                <input type='text' name='name_friend[]' id='name_friend[]' class='form-control name_friend[]' placeholder='Nama' required />
            </div>
            <div class="col-md-4">
                <label>Nomor Handphone *</label>
                <input type='text' name='nomor_telepon[]' id='nomor_telepon[]' class='form-control nomor_telepon[] telepon phone-email' placeholder='Nomor Telepon' required />
            </div>
            <div class="col-md-4">
                <label>Email</label>
                <input type='email' name='email_friend[]' id='email_friend[]' class='form-control email_friend[] phone-email' placeholder='Email' />
            </div>
        </div>
    </div>
</div>

jQuery

$(".phone-email").blur(function(e) {
    var param = $(this).val();
    var url = "<?php echo base_url('/Campaign/check_data');?>";
    $.ajax({
        url: url,
        type: "POST",
        data: {
            param: param
        }
    }).done(function(d) {
        var obj = JSON.parse(d);
        if (obj.status == "0") {
            alert(obj.message);
            $("#add-friend").attr('disabled', 'disabled');
            $(this).attr('style', 'border: 2px solid #a94442');
        } else if (obj.status == "1") {
            $("#add-friend").removeAttr('disabled');
        }
    });
});

This code does not work properly the element class not have border, I want to if status = 1 so the input will give red border, but my code does not work properly

$(this).attr('style', 'border: 2px solid #a94442');

Answer 1

The problem with your implementation is that current element context this is not the phone-email element in the complete method of .ajax()

Use

$(".phone-email").blur(function (e) {
    //Cache the this context in a variable
    var _this = $(this); 

    $.ajax().done(function(d){
        //Use the variable
        _this.attr('style', 'border: 2px solid #a94442');

        //You can use .css() method to change the CSS rule
        //_this.css('border', '2px solid #a94442');
    }); 
}); 

Note: I have stripped the code and kept only the part which was required.