কীভাবে jQuery ব্যবহার করে ক্লিক করে অ্যাঙ্কর টেক্সট / href পাবেন?

Question

বিবেচনা করুন আমার কাছে এমন একটি অ্যাঙ্কর রয়েছে যা দেখতে এটির মতো দেখাচ্ছে

 <div class="res">
     <a href="~/Resumes/Resumes1271354404687.docx">
         ~/Resumes/Resumes1271354404687.docx
     </a>
 </div>

দ্রষ্টব্য: অ্যাঙ্কারের জন্য কোনও আইডি বা ক্লাস থাকবে না ...

আমি onclickসেই অ্যাঙ্কারের jQuery এ href / পাঠ্য পেতে চাই ।

Answer 1

দ্রষ্টব্য:info_link আপনি যে কোনও লিঙ্ক থেকে তথ্য পেতে চান তাতে ক্লাস প্রয়োগ করুন ।

<a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
    ~/Resumes/Resumes1271354404687.docx
</a>

Href জন্য:

$(function(){
  $('.info_link').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

পাঠ্যের জন্য:

$(function(){
  $('.info_link').click(function(){
    alert($(this).text());
  });
});

।

প্রশ্ন সম্পাদনার উপর ভিত্তি করে আপডেট করুন

আপনি তাদের এখন এই মত পেতে পারেন:

Href জন্য:

$(function(){
  $('div.res a').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

পাঠ্যের জন্য:

$(function(){
  $('div.res a').click(function(){
    alert($(this).text());
  });
});

Comments

অন্য উপাদানটিতে শ্রেণীর নামের লিঙ্ক থাকলে এটি ভঙ্গ হবে। ট্যাগ সিলেক্টর নির্দিষ্ট করা আরও ভাল।

— রাহুল

@ রহুল: এটি মজার, এটি হবে না, linkক্লাসটি নির্দিষ্ট যে লিঙ্কগুলি থেকে তিনি তথ্য পেতে চান তার জন্য থাকার কথা।

— সরফরাজ

তবে নিম্নলিখিত মার্কআপটি যদি হয় তবে কী হবে<div class='link' />

— রাহুল

@ রহুল: এটি আবার মজার হয়ে উঠছে, তিনি তার লিঙ্কগুলিকে কোনও অনন্য নাম দিতে পারেন।

— সরফরাজ

আপনি যদি এর পরিবর্তে $ এর this.hash (এই) .attr ( 'সূরা') ব্যবহার করতে পারে

— Meo

Answer 2

প্রশ্নের আপডেট প্রতিফলিত করতে সম্পাদিত

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});

Comments

এটি সমস্ত লিঙ্কগুলিকে এমনকি তার আগ্রহী নাও হতে পারে

— সরফরাজ

Answer 3

JQuery ছাড়া:

খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে এটি করা এত সহজ যখন আপনার jQuery প্রয়োজন হয় না। এখানে দুটি বিকল্প রয়েছে:

• পদ্ধতি 1 - গুণটির সঠিক মানটি পুনরুদ্ধার করুন href:

  উপাদানটি নির্বাচন করুন এবং তারপরে .getAttribute()পদ্ধতিটি ব্যবহার করুন ।

  এই পদ্ধতিটি সম্পূর্ণ ইউআরএল ফিরিয়ে দেয় না , পরিবর্তে এটি গুণকের সঠিক মানটি পুনরুদ্ধার করে href।

  var anchor = document.querySelector('a'),
      url = anchor.getAttribute('href');
  
  alert(url);

  <a href="/relative/path.html"></a>

---

• পদ্ধতি 2 - সম্পূর্ণ ইউআরএল পাথ পুনরুদ্ধার করুন:

  উপাদানটি নির্বাচন করুন এবং তারপরে কেবল hrefসম্পত্তিটি অ্যাক্সেস করুন ।

  এই পদ্ধতিটি সম্পূর্ণ ইউআরএল পাথ দেয়।

  এই ক্ষেত্রে: http://stacksnippets.net/relative/path.html।

  var anchor = document.querySelector('a'),
      url = anchor.href;
  
  alert(url);

  <a href="/relative/path.html"></a>

---

আপনার শিরোনাম থেকে বোঝা যায়, আপনি hrefক্লিক ক্লিক করে মান পেতে চান । কেবল একটি উপাদান নির্বাচন করুন, ক্লিক ইভেন্ট শ্রোতা যুক্ত করুন এবং তারপরে hrefউল্লিখিত পদ্ধতিগুলির মধ্যে দুটি ব্যবহার করে মানটি ফিরিয়ে দিন ।

var anchor = document.querySelector('a'),
    button = document.getElementById('getURL'),
    url = anchor.href;

button.addEventListener('click', function (e) {
  alert(url);
});

<button id="getURL">Click me!</button>
<a href="/relative/path.html"></a>

Answer 4

আপডেট হওয়া কোড

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});

Comments

এটি সমস্ত লিঙ্কগুলি এমনকি তার আগ্রহী নাও হতে পারে

— সরফরাজ

তবে এটি তার মার্কআপ অনুসারে যা তিনি কোনও শ্রেণীর নাম নির্দিষ্ট করেন নি।

— রাহুল

উন্নতি সম্ভব যেখানে তাকে গাইড করা উচিত :)

— সরফরাজ

নিম্ন ভোটের সম্ভাব্য কারণ হতে পারে যে প্রশ্নকারী আপনার সাথে কী করেছে তা সন্ধান করছে না$('a','div.res')

— সরফরাজ

Answer 5

বিকল্প

উপরের সরফরাজের উদাহরণ ব্যবহার করে।

<div class="res">
    <a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
        ~/Resumes/Resumes1271354404687.docx
    </a>
</div>

Href জন্য:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});