JQueryクリックでかっこのテキストを削除し、都市名のみを表示

Question

「a」をクリックすると、都市名を取得し、 'filter_selected_det'に表示する必要があります。現在のコードを正しく追加します。しかし、私は削除したい（PER）..など。コードなしで「都市名」のみを表示する必要があります。

また、一度5つの都市が追加されました。都市の追加を防ぐ必要があります。最大5都市のみ。

貴重なご意見ありがとうございます。

HTML：

<div class="filter_selected_det"> 
    <div class="allCities">All Cities</div> 
</div> 
<div class="city_container"> 
    <a href="#">Perth (PER)</a> 
    <a href="#">Sydney (SYD)</a> 
    <a href="#">Krabi (KRB)</a> 
    <a href="#">Melbourne (MLB)</a> 
    <a href="#">Adeliade (ADL)</a> 
    <a href="#">London (LDN)</a> 
    <a href="#">Flordia (FLO)</a> 
</div> 

JS：

$('.city_container a').on('click', function (e) { 
    e.preventDefault(); 
    $(this).addClass('selected'); 
    $('.allCities').remove(); 
    var newCity = $('<div/>').html($(this).html()); 
    $('.filter_selected_det').append(newCity); 
}); 

Answer 1

$('.city_container a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).addClass('selected'); 
 
    $('.allCities').remove(); 
 

 

 

 
    var newCity = $('<div/>').html($(this).text().split('(')[0]);//remove the (
 

 
    if ($('.filter_selected_det div').length < 5) {// only allow 5 cities 
 
    $('.filter_selected_det').append(newCity); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filter_selected_det"> 
 
    <div class="allCities">All Cities</div> 
 
</div> 
 
<div class="city_container"> 
 
    <a href="#">Perth (PER)</a> 
 
    <a href="#">Sydney (SYD)</a> 
 
    <a href="#">Krabi (KRB)</a> 
 
    <a href="#">Melbourne (MLB)</a> 
 
    <a href="#">Adeliade (ADL)</a> 
 
    <a href="#">London (LDN)</a> 
 
    <a href="#">Flordia (FLO)</a> 
 
</div>

1. コンテナ内のdivを数えた都市を5つだけにして、条件文を作成します。
2. () splitを削除するには、最初の要素を取得します。

Answer 2

あなたは、このアプローチを見てみることができます：substringを使用し

$(document).ready(function() { 
 
    var counter = 0; 
 
    $('.city_container a').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    if (counter >= 5) 
 
     return; 
 

 
    $(this).addClass('selected'); 
 
    $('.allCities').remove(); 
 

 
    var selectedCity = $(this).text(); 
 

 
    selectedCity = selectedCity.substring(0, selectedCity.indexOf('(')); 
 

 
    var newCity = $('<div/>').html(selectedCity); 
 
    $('.filter_selected_det').append(newCity); 
 
    counter++; 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="filter_selected_det"> 
 
    <div class="allCities">All Cities</div> 
 
</div> 
 
<div class="city_container"> 
 
    <a href="#">Perth (PER)</a> 
 
    <a href="#">Sydney (SYD)</a> 
 
    <a href="#">Krabi (KRB)</a> 
 
    <a href="#">Melbourne (MLB)</a> 
 
    <a href="#">Adeliade (ADL)</a> 
 
    <a href="#">London (LDN)</a> 
 
    <a href="#">Flordia (FLO)</a> 
 
</div>

は、コードなしで唯一の都市名を取得します。

Answer 3

角括弧内のコードが常に3文字の場合は、substring()を使用して削除できます。以下のコードを参照してください。私は5都市の条件を追加しました。私は、各都市を一度だけ選択したいと思うので、その条件も追加しましたが、好きな場合は削除することができます。

$('.city_container a').on('click', function (e) { 
 
    e.preventDefault(); 
 
    //Only 5 cities can be selected 
 
    if ($('.filter_selected_det div').length > 4) 
 
    return; 
 
    //Each city can only be selected once 
 
    if ($(this).hasClass('selected')) 
 
    return; 
 

 
    $(this).addClass('selected'); 
 
    $('.allCities').remove(); 
 
    var newCity = $(this).html(); 
 
    newCity = newCity.substring(0, newCity.length - 6); 
 
    newCity = $('<div/>').html(newCity); 
 
    $('.filter_selected_det').append(newCity); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filter_selected_det"> 
 
    <div class="allCities">All Cities</div> 
 
</div> 
 
<div class="city_container"> 
 
    <a href="#">Perth (PER)</a> 
 
    <a href="#">Sydney (SYD)</a> 
 
    <a href="#">Krabi (KRB)</a> 
 
    <a href="#">Melbourne (MLB)</a> 
 
    <a href="#">Adeliade (ADL)</a> 
 
    <a href="#">London (LDN)</a> 
 
    <a href="#">Flordia (FLO)</a> 
 
</div>

Answer 4

あなたは括弧内のコンテンツを削除するには、正規表現を使用することができます。 は、テキストコンテンツを取得し、アンカータグにクラスを付けて、[OK]をクリックします上の都市jquery.children()機能

$('.city_container a').on('click', function (e) { 
    e.preventDefault(); 
    console.log($('.filter_selected_det').children()); 
    if($('.filter_selected_det').children().length>=5) // validation for max cities 
    return; 
    $(this).addClass('selected'); 
    $('.allCities').remove(); 
    var newCity = $('<div/>').html($(this).text().replace(/\([A-Z,a-z,0-9]*\)/g,'')); // removes text content in parenthesis 
    $('.filter_selected_det').append(newCity); 
});