2011-09-09 16 views
-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 = VARIABLE +場合は '_小さなは' =その後、SlideUp IDをクリックVARIABLE + '_ big'

どうすればいいですか?

P.S.また、私はjQueryのスクリプトを作成しました:

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

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

}); 

をそして、これは私が望む方法で作業しているが、私はすべてのリンクのためにこのコードをコピーして貼り付ける必要があります。

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

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

EDIT:

答えて

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

これは、これを解決する方法です。

+0

これはまさに私が探していたものです - 小さな1行のコード!どうもありがとうございました。完璧に動作するhttp://jsfiddle.net/H3pfH/7/ – Lucas

0

あなたはendswithセレクタを試みることができると、あなたは、2つのいずれかが、大きなもので取得するために行うことができます:彼らはしている場合

使用.next()または選択された<a>タグのidを取得して部分文字列を取得し、最初の部分を取得して_bigをセレクタに渡すことができます。

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

ここで 'split()'の使用についてはわかりません。 idが "muffler_belt_small"だったら '$( '#muffler_big')...'で終わるでしょう。 –

0

あなたは、あなたのマークアップの正規表現を少し

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

変更を使用してコードをextandことができます。

<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'); 
}); 

これを追加しました複数の意味を持つIDを割り当てるのではなく、マークアップを作成することのメリットが意味を持ちます(セマンティックマークアップ)。