по уходу за детьми Доступа элементы тега Якорь по щелчку с помощью JQuery

Question

У меня есть ниже HTML

<a id='quoteLinks' class='quoteLinksClass'> 
    <span data-action='viewQuote'> 
    <i data-action='viewQuote' data-quoteid ="2" class="fa fa-eye"></i> 
    </span> 

    <span data-action='editQuote'> 
    <i data-action='editQuote' data-quoteid ="3" class="fa fa-eye"></i> 
    </span> 
</a> 

Если пользователь нажимает на участке диапазона анкерного тега, я хочу, чтобы выполнять различные действия соответственно. Как - 'Edit Quote' или 'View Quote', как указано выше

У меня есть следующий фрагмент кода JQuery:

$('.quoteLinksClass').on('click',function(event){ 
    event.stopPropagation(); 
    if(event.target.nodeName == 'SPAN' || event.target.nodeName == 'I'){ 
    var quoteId = $(this).data('quoteid'); 
    var action = $(this).data('action'); 
    console.log($(this)); // Here it prints the <a> object, but I 
          // need <span> or <i> based on the click 
    if(action == 'viewQuote') { 
     window.location.href="view page"; 
    } else if(action == 'editQuote') { 
     window.location.href="edit page"; 
    } 
    } 
}); 

Answer 1

Вы можете использовать event.target вместе с .closest() найти фактическую span которая была нажата, а затем получить доступ к data-* атрибуты, связанные с пролетами ниже

<a id='quoteLinks' class='quoteLinksClass'> 
    <span data-action='viewQuote' data-quoteid ="2"> 
     <i class="fa fa-eye"></i> 
    </span> 

    <span data-action='editQuote' data-quoteid ="3"> 
     <i class="fa fa-eye"></i> 
    </span> 
</a> 

затем

$('.quoteLinksClass').on('click', function (event) { 
    event.stopPropagation(); 

    var $span = $(event.target).closest('span'); 
    var quoteId = $span.data('quoteid'); 
    var action = $span.data('action'); 
    if (action == 'viewQuote') { 
     window.location.href = "view page"; 
    } else if (action == 'editQuote') { 
     window.location.href = "edit page"; 
    } 
}); 

Demo: Fiddle

Answer 2

Вы можете добавить click событие на span и проверить action.

$('.quoteLinksClass').on('click', 'span', function (event) { 
    var action = $(this).data('action'); 
    if (action === 'viewQuote') { 

    } else if (action === 'editQuote') { 

    } 
}); 

Это позволит устранить проблемы.

Answer 3

$('.quoteLinksClass').on('click','span,i',function(event){ 
    event.stopPropagation(); 

    var quoteId = $(this).data('quoteid'); 
    if(quoteId.length ==0) { 
     quoteId = $(this).find('i').data('quoteid'); 
    } 

     var action = $(this).data('action'); 
     if(action == 'viewQuote'){ 
     window.location.href="view page"; 
     } 
     else if(action == 'editQuote'){ 
     window.location.href="edit page"; 
     } 
    }); 

Answer 4

$('.quoteLinksClass > span').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var that = $(this); 
 
    var action = that.attr('data-action'); 
 
    if (action == 'viewQuote') { 
 
    alert('viewQuote'); 
 
    } else if (action == 'editQuote') { 
 
    alert('editQuote'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a id='quoteLinks' class='quoteLinksClass'> 
 
    <span data-action='viewQuote'> 
 
    <i data-action='viewQuote' data-quoteid ="2" class="fa fa-eye"></i>View 
 
    </span> 
 

 
    <span data-action='editQuote'> 
 
    <i data-action='editQuote' data-quoteid ="3" class="fa fa-eye"></i>Edit 
 
    </span> 
 
</a>

Answer 5

Посмотрите на $ (это) this =>event.target

$('.quoteLinksClass').on('click',function(event){ 
    event.stopPropagation(); 
    if(event.target.nodeName == 'SPAN' || event.target.nodeName == 'I'){ 
    var quoteId = $(event.target).data('quoteid'); 
    var action = $(event.target).data('action'); 
    console.log($(this)); // Here it prints the <a> object, but I 
           // need <span> or <i> based on the click 
    if(action == 'viewQuote') { 
     window.location.href="view page"; 
    } else if(action == 'editQuote') { 
     window.location.href="edit page"; 
    } 
    } 
}); 

Answer 6

Я бы просто сделать две ссылки из него. В настоящее время ваш JavaScript знает довольно много о вашей структуре HTML. Поскольку у вас есть котировках идентификатор на каждом элементе диапазона, как о просто делает:

<span data-action='viewQuote' data-quoteid ="2"> 
    <i class="fa fa-eye"></i> 
</span> 

<span data-action='editQuote' data-quoteid ="3"> 
    <i class="fa fa-eye"></i> 
</span> 

, а затем в вашем JS:

$('*[data-action="viewQuote"]').on('click', function() { 
    var quoteId = $(this).data('quoteid'); 
    window.location.href="viewQuote?quoteId="+quoteId; 
} 

$('*[data-action="editQuote"]').on('click', function() { 
    var quoteId = $(this).data('quoteid'); 
    window.location.href="editQuote?quoteId="+quoteId; 
} 

Таким образом, ваш код не нужно ничего знать о вашем HTML макет, он просто должен знать о ваших атрибутах данных. Вы также сохраняете некоторые символы if и elses: D.

Answer 7

Пожалуйста, попробуйте следующее:

$(document).ready(function() { 
 
    $('.quoteLinksClass span i').on('click',function(event){ 
 
    event.stopPropagation(); 
 
    if(event.target.nodeName == 'SPAN' || event.target.nodeName == 'I'){ 
 
     var quoteId = $(this).data('quoteid') 
 
     var action = $(this).data('data-action'); 
 
     console.log($(this)); // Here it prints the <a> object, but I 
 
           // need <span> or <i> based on the click 
 
     if(action == 'viewQuote') { 
 
     window.location.href="view page"; 
 
     } else if(action == 'editQuote') { 
 
     window.location.href="edit page"; 
 
     } 
 
    } 
 
    }); 
 
});

<a id='quoteLinks' class='quoteLinksClass' href="#"> 
 
    <span data-action='viewQuote'> 
 
    <i data-action='viewQuote' data-quoteid ="2" class="fa fa-eye"></i> 
 
    </span> 
 

 
    <span data-action='editQuote'> 
 
    <i data-action='editQuote' data-quoteid ="3" class="fa fa-eye"></i> 
 
    </span> 
 
</a>