使用 Jquery 强制用户仅选择一个选择器 'a href'

Question

我正在编写一小段代码来生成媒体标签搜索，但我有点卡住了。

 ($("#interiors_search a").click(function(event) {)

我需要做的是我一生都想不通的是，在第一列，房间类型只允许用户 select 一个选择。

如您所见，单击 selection 使用 onclick 使用 jQuery 更新标签数组，然后在提交时，标签数组被发送到结果页面。

因此它必须将 selection 添加到数组中，并且如果用户改变主意，则从数组中删除先前的 selected 标签，同时只允许一个选择。

目前一切正常，多个标签 selection 很好，但我不想依赖用户动脑筋只检查一种房型，就好像两种或更多房型是 selected 它将 return 一个空查询。

我们一如既往地非常感谢您的帮助。

这是 fiddle 目前我所拥有的： https://jsfiddle.net/z1s18dwa/1/

JS

 Propertywise = {};

 Propertywise = {
   filters: function() {
     if (jQuery(".interiors_filter").is(":visible")) {
       jQuery('.interiors_filter').stop().slideUp('fast');
     } else {
       jQuery('.interiors_filter').stop().slideDown();
     }
   },
   tags: {}
 }

 $("#interiors_search a").click(function(event) {
   event.preventDefault();
   var tag = $(this).data('value');
   $(this).toggleClass("selected");

   if (Propertywise.tags[tag]) {
     delete Propertywise.tags[tag];

   } else {
     Propertywise.tags[tag] = true;

   }

 });

HTML

 <div class="interiors">
   <div id="content" class="content sub_holder">
     <div class="fullbleed">
       <ul class="menu" id="interiors_menu">
         <li id="interiors_menu_search">
           <a href="#" onclick="Propertywise.filters(); return false;">Search</a>
    </li>
    <li>
      <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by room</a>
    </li>
    <li>
      <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by style</a>
    </li>
    <li>
      <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by colour</a>
    </li>
    <li>
      <a class="dropdown" href="#" onclick="Propertywise.filters(); return false;">Search by feature</a>
    </li>
  </ul>
  <div class="interiors_filter tags columns_4" style="display: block;">
    <form id="interiors_search" name="interiors_search">
      <ol class="details">
        <li>
          <h3>Rooms</h3>
          <p><a data-value="bathroom" href="#">Bathroom</a>
            <a data-value="bedroom" href="#">Bedroom</a>
            <a data-value="kitchen" href="#">Kitchen</a>
            <a data-value="outside-space" href="#">Outside space</a>
            <a data-value="reception" href="#">Reception</a></p>
        </li>
        <li>
          <h3>Styles</h3>
          <p><a data-value="contemporary" href="#">Contemporary</a>
            <a data-value="country" href="#">Country</a>
            <a data-value="quirky" href="#">Quirky</a>
            <a data-value="traditional" href="#">Traditional</a></p>
        </li>
        <li id="d3">
          <h3>Colours</h3>
          <p><a data-value="black" href="#">Black</a>
            <a data-value="blue" href="#">Blue</a>
            <a data-value="brown" href="#">Brown</a>
            <a data-value="colourful" href="#">Colourful</a>
            <a data-value="cream" href="#">Cream</a>
            <a data-value="green" href="#">Green</a>
            <a data-value="grey" href="#">Grey</a>
            <a data-value="pink" href="#">Pink</a>
            <a data-value="red" href="#">Red</a>
            <a data-value="white" href="#">White</a>
            <a data-value="yellow" href="#">Yellow</a></p>
        </li>
        <li>
          <h3>Features</h3>
          <p><a data-value="childrens" href="#">Children's</a>
                <a data-value="feature-fireplace" href="#">Feature fireplace</a>
                <a data-value="feature-lighting" href="#">Feature lighting</a>
                <a data-value="feature-staircase" href="#">Feature staircase</a>
                <a data-value="great-view" href="#">Great View</a>
                <a data-value="home-office" href="#">Home Office</a>
                <a data-value="hotel-chic" href="#">Hotel chic</a>
                <a data-value="loft-living" href="#">Loft living</a>
                <a data-value="open-plan" href="#">Open-plan</a>
                <a data-value="outdoor-living" href="#">Outdoor living</a>
                <a data-value="small" href="#">Small</a>
                <a data-value="statement-bath" href="#">Statement bath</a>
                <a data-value="statement-wallpaper" href="#">Statement wallpaper</a>
                <a data-value="swimming-pool" href="#">Swimming pool</a></p>
            </li>
          </ol>
          <p class="cta"></p>
          <input class="submit" style="cursor:pointer;font-size:130%;clear:both;margin:24px auto;float:none;display:block;border:none;text-transform:uppercase;background-color:#fff000;" type="button" value="Search">
        </form>
      </div>
     </div>
    </div>
   </div>
  </div>

Answer 1

我在这里有一个工作片段，我写得非常快，有很多方法可以处理它，但效果很好。

我在包裹房间锚标签的段落中添加了 class：

<p class='rooms'>

我在点击事件中使用 class 来强制用户只能使用此代码选择一行：

  if ($(this).closest('p').hasClass('rooms')) {
      $(this).closest('p').find('a').each(function() {
          $(this).removeClass('selected');
      });
  }

工作fiddle： https://jsfiddle.net/z1s18dwa/4/

编辑

我添加了一些代码来处理标签，当我删除 'selected' class 我也只是删除了标签。

  var roomTag = $(this).data('value');
  if (Propertywise.tags[roomTag]) {
        delete Propertywise.tags[roomTag];
  }

已更新 fiddle：https://jsfiddle.net/z1s18dwa/13/

使用 Jquery 强制用户仅选择一个选择器 'a href'

Force user to choose only one selector 'a href' using Jquery

arrays

jquery

jquery-selectors