jQuery的 - 在功能

-1

變量字符串

我的HTML包含許多行這樣的：jQuery的 - 在功能

<a href="#" id="car_small">Car 1</a> 
<a href="#" id="car_big">Car 2</a> 
<a href="#" id="wheels_small">Wheels 1</a> 
<a href="#" id="wheels_big">Wheels 2</a>

我想我的腳本以這種方式工作：

如果ID =變量+「_小」點擊則效果基本show ID = VARIABLE +'_ big'

如何做到這一點？

P.S.此外，我已經創建了jQuery腳本：

$('a').click(function() { 

if($(this).attr('id') == 'car_small'){ 
    $('#car_big').slideUp('fast', function() { }); } 

});

而且這是工作在方式，我想，但我需要爲每個鏈接複製並粘貼此代碼。

來源

2011-09-09 Lucas

$(document).ready(function() { 
    $('a[id$="_small"]').click(function(){ 
     $('#'+$(this).attr('id').toString().replace('_small','_big')).slideUp('fast', function() { }); 
return false; 
    }); 
    });

這是解決這個問題的方法。

來源

2011-09-09 13:37:25

這正是我正在尋找的 - 小，一行代碼！非常感謝你。完美的作品http://jsfiddle.net/H3pfH/7/ – Lucas

你可以嘗試的endsWith選擇：

$('a[id$="_small"]')

http://api.jquery.com/attribute-ends-with-selector/

編輯：然後你可以做兩件事情之一，在大的一個得到：

使用.next()如果他們或者你可以得到所選<a>標記的id，並將它的子字符串獲得第一部分，然後將_big傳遞給選擇器。

來源

2011-09-09 13:33:50

$('a[id$="_small"]').click(function(e){ 
    e.preventDefault(); 
    var type = $(this).attr('id').split('_', 2)[0]; 
    $('#'+type+'_big').slideUp('fast'); 
});

來源

2011-09-09 13:36:24 Shef

我不確定在這裏使用'split（）';如果這個ID是「muffler_belt_small」，你最終會得到'$（'＃muffler_big'）...'。 –

可以使用正則表達式

$('a').click(function() { 
    var matches=/(\w+)_small/.exec($(this).attr('id')); 
    if(matches.length){ 
    $('#'+matches[1]+'_big').slideUp('fast', function() { }); } 
});

來源

2011-09-09 13:37:31

更改您的標記位同時能延長你的代碼：

<a href='#' class='sizeable' data-type='car' data-size='small'>Car 1</a> 
<a href='#' class='sizeable' data-type='car' data-size='large'>Car 2</a> 
<a href='#' class='sizeable' data-type='wheel' data-size='small'>Wheel 1</a> 
<a href='#' class='sizeable' data-type='wheel' data-size='large'>Wheel 2</a>

而且你的jQuery的可能是相當簡單：

$('.sizable').click(function(){ 
    var $this = $(this); 
    var type = $this.data('type'); 
    var size = $this.data('size'); 

    $('.sizeable[data-type="'+type+'"][data-size="large"]').slideUp('fast'); 
});

這增加使你的標記具有意義的好處，而不是分配具有多種含義的Ids（這破壞了我們的想法）語義標記）。

來源

2011-09-09 13:38:35

jQuery的 - 在功能

回答

相關問題