Question

On click 'a', it have to get city name and display in 'filter_selected_det'. It adds correctly with present code. But, i want to remove (PER)..etc. It has to show only 'City Name' without code.

Also once 5 cities are added.. have to prevent further addition of cities. Maximum 5 cities only.

Thanks for your valuable comments.

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>

To make only five cities count the div inside the container and do conditional statement.
To remove the () use split then get the first element.

Answer 2

You can take a look at this approach:

$(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>

Used substring to get only city name without code.

Answer 3

If the code between the brackets is always 3 characters, you can use substring() to remove it. See the code below. I added the condition for 5 cities. I think you also want each city to be only selected once, so I added that condition too, but you can remove it if you like.

$('.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

您可以使用正则表达式删除括号中的内容。验证最大城市数量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);
});

JQuery on click remove bracket text and show only city name

4 个答案: