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

Posted 2023-05-09

【中文标题】强制用户使用 Jquery 仅选择一个选择器“a href”

【英文标题】：Force user to choose only one selector 'a href' using Jquery

【发布时间】：2016-08-14 22:28:30

【问题描述】：

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

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

我需要做的事情，为了我的一生，无法弄清楚如何，在第一列，房间类型只允许用户选择一个选项。

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

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

目前一切正常，多标签选择很好，但我不想依赖用户用他们的大脑只检查一种房间类型，就好像选择了两种或更多房间类型一样，它会返回一个空查询。

一如既往地感谢任何帮助。

这是我目前所拥有的小提琴： 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>

【参考方案1】：

我在这里有一个有效的 sn-p，我很快就写好了，有很多方法可以处理它，但这已经足够了。

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

<p class='rooms'>

我在点击事件中使用该类来强制用户使用此代码仅选择一行：

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

工作小提琴： https://jsfiddle.net/z1s18dwa/4/

编辑

我添加了一些代码来处理标签，当我删除“选定”类时，我也只是删除了标签。

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

更新小提琴：https://jsfiddle.net/z1s18dwa/13/

【讨论】：

嗨，是的，非常适合取消选择链接，不幸的是，这不会更新（或）从我卡住的数组中删除标签，将删除/添加添加到取消选择中.基本上，该类只是一个 css 选择器，与表单输入没有任何关联..

虽然引起了你的注意 :)D 在试图弄清楚的时候在这里思考，在搜索提交后让先前选择的标签保持选中状态会很好。你会添加 Jquery 以突出显示选择器还是使用php $_GET?

这取决于提交。如果页面刷新，则您必须缓存选择或从保存选择的位置加载它。从保存的位置加载它很可能是 php.ini 文件。如果你使用 Ajax 请求，一切都可以在 jQuery 中处理。