آموزش تغییر دادن href لینک ها با jQuery

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۲ مرداد ۱۳۹۷

آموزش تغییر دادن href لینک‌ها با jQuery

گاهی اوقات نیاز میشه که طی شرایطی آدرس لینکهای سایت رو تغییر بدیم. در این مطلب میخوایم به کمک jQuery مبحث تغییر دادن href لینک‌ها رو مدیریت کنیم و کارهای مورد نظرمون رو انجام بدیم.

کد زیر رو ببینید:

$("a").attr("href", "http://www.google.com/");

این کد، href تمام لینک‌های موجود رو به http://www.google.com تبدیل می‌کنه. اما ممکنه گاهی اوقات تگ‌های a رو مورد استفاده قرار بدین که در اونا از href استفاده نشده باشه و برای مقاصد دیگه مورد استفاده قرار گرفته باشن. با روش بالا اون لینک‌ها هم انتخاب میشن و ویژگی href به اونا اضافه میشه و کار رو خراب میکنه. پس باید انتخابگر رو خاصتر کنیم تا فقط اون لینکهایی که href دارن رو انتخاب کنیم و فقط اونا رو تغییر بدیم. مثلا لینکهای زیر رو ببینید:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/>The CodeProject</a>

همونطور که میبینید تگ a اول اصلا ویژگی href نداره و فقط names برای اون تعریف شده است. پس میتونیم کدی که در ابتدا برای تغییر لینک استفاده کردیم رو بصورت زیر تغییر بدیم:

$("a[href]").attr("href", "http://www.google.com/");

با اینکار فقط اون لینکهایی که ویژگی href دارن با تغییر مواجه میشن.

ممکنه شما بخواید کارهای جالب‌تری رو انجام بدید. به عنوان مثال، در بین href‌های موجود اون هایی که دقیقا با  http://www.google.com مطابقت دارند رو انتخاب کنید و این آدرس رو با http://www.live.com تعویض کنید. به این منظور می‌تونید از کد زیر استفاده کنید:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

حتی شما می‌تونید این مسئله رو خاص‌تر کنید و فقط زمانی که فقط بخشی از href‌های موجود با href مورد نظرتون یکسان بود اون بخش رو با href  خاصی جایگزین کنه:

$("a[href^='http://stackoverflow.com']")
  .each(function() {
    this.href = this.href.replace(/^"http://stackoverflow.com", http:\/\/beta\.stackoverflow\.com/);
  }
);

به عنوان نمونه در این کد ابتدا href هایی که با http://stackoverflow.com شروع شدن انتخاب میشن و بعد از اون با استفاده از متد replace به ابتدای آدرس اونا یک beta اضافه میکنیم. با اینکار همه لینکهایی که با http://stackoverflow.com شروع میشدن یک beta به اولشون اضافه میشه و بصورت http://beta.stackoverflow.com میشن.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

محمد زارعی

چجوری میشه وقتی روی لینک src کلیک شد مقدار اون رو دریافت کرد؟
دقیقا یه صفحه با تعداد زیادی لینک ویدیو و یک ویدیو پلیر دارم. میخوام روی هر لینک ویدیو که کلیک شد، مقدار href داخل آن به جای مقدار src ویدیو پلیر قرار بگیره.
مشکل در سلکت تگ a که کلیک شده هستش

محمد اسفندیاری

نمونه کدی که مشکل دارید رو بصورت فایل در بیارید و اون رو آپلود کنید و به من بدین تا بررسی کنم
موفق باشید

محمدصابر فتح الهی

سلام.ممنون از سایت خوبتون.اول عذر خواهی کنم بابت اینکه سوالم با مطلب خیلی ربط نداره .ممنون میشم سوالم رو پاسخ بدید.سوالم اینه که چجور میشه در طراحی یک سایت در جی کوئری یا هرچیز دیگه، یه شرط بزاریم کنیم که اگر Liهای یه قسمت بیشتر از صفر بشه،یه چیزی که مد نظر منه ،نمایان(show)بشه.البته که در حالت پیش فرض، اون چیز مدنظر من، مخفی(hide) هستش.

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :