选择一个div会像单选按钮一样取消选择其他div？

Question

我已经使用数据库中的循环创建了一个div列表。

当我单击选择..它变得像

我面临的问题是一次只能选择一个公司...我该如何选择一家将使先前选择的公司取消选择的公司...程序是这样的...

{section name=i loop=$id7}
  <div class="company" style="width:220px; height:220px; background-color:white;margin-left:12px;margin-bottom:22px;float:left;" >

    <div id="ctable">
      <table style="margin-top:20px;margin-left:18px;width:178px;height:149px;">
        <tr style="text-align:center;">
          <td colspan="2" align="center" valign="center" height="42px">{$id7[i].vCompanyName}</td> 
        </tr> 
        <tr>
          <td colspan="2" align="center" valign="center" height="107px">
            <img src="{$tconfig.tsite_images}{$id7[i].vImage}">
          </td>
        </tr>
      </table>
    </div>  


    <div id="selecty" class="{$id7[i].iEmployerId}" style="width:178px;height:32px; margin-left:18px;">
      <a href="javascript:void(0);" onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}')" class="but_blue_small">Select</a>
    </div>

    <div id="selected_state" style="width:198px;height:32px;display:none;background-color:white;margin-left:16px;">&nbsp;
      <img src="{$tconfig.tsite_images}tick.png" />&nbsp;<font color="#cdcdcd"><b>Company selected</b></font>
    </div>   
  </div>
{/section}          

它的javascript是这样的

<script>
  function selecty_hide (eid,compid) {
    alert(eid);
    alert(compid);
    document.getElementById('selecty').style.display="none";
    document.getElementById('selected_state').style.display="block";
    document.getElementById('eid').value=eid;
  }
</script>

Answer 1

如果可以使用jQuery，那很容易

<div class="mydiv" style="cursor: pointer;">
    box 1
</div>
<div class="mydiv" style="cursor: pointer;">
    box 2
</div>
<div class="mydiv" style="cursor: pointer;">
    box 3
</div>

<script type="text/javascript">
    $(".mydiv").click(function() { 
        if($(this).hasClass("selected") == false) {
            $(".mydiv").removeClass("selected");
            $(this).addClass("selected");
        } else {
            $(".mydiv").removeClass("selected");
        }
    });
</script>

这将从具有“ mydiv”类的所有元素中删除“ selected”类，然后将其添加到您单击的单个元素中。

它还支持取消选择当前元素+您可以完全放下按钮，这足以单击div！

您应该能够根据您的代码调整我的示例。

您现在需要做的就是为div定义一个自定义类，该类将显示不同的内容，例如，当div具有“ selected”类时仅显示“ company selected”。

玩得开心，祝你好运！

Answer 2

假设您有一个针对所选公司div的类（selected_company）。 当有人选择任何其他div时，则获取先前选择的div并删除该类，然后将该类添加到当前选定的div中。

像这样：

$(".selected_company").removeClass('selected_company');
$(this).addClass('selected_company');

然后一次只能选择一家公司。

这是一个示例演示： http : //jsfiddle.net/kRD4S/

Answer 3

可以对javscript进行少量修改，如下所示

<script>
function selecty_hide (eid,compid,element) {
   alert(eid);
   alert(compid);
   document.getElementById('selecty').style.display="none";
   document.getElementById('ctable').style.display="none";
   document.getElementById('selected_state').style.display="none";
   element.style.display="block";
   document.getElementById('eid').value=eid;
 }

需要在函数调用（第三个参数）期间传递另一个参数为“ this”

 onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}',this)"

上面的脚本将首先不显示ID为selecty，ctable，selected_state的所有div，这将显示阻止所选的div。

希望这对您有帮助

Answer 4

认为它略有不同。 如果选择了公司A，并且用户现在选择了公司B：

• 取消选择所有元素。
• 现在选择公司B

如果您这样做，就可以轻松找出需要取消选择的公司。

像这样：

$(".company").click(function() {
    //remember the new item
    var clickedItem = $(this);

    //unselect everything
    $(".company").removeClass("companySelected");

    //select the company that was clicked
    clickedItem.addClass("companySelected");
});

Answer 5

看起来很简单，您可以通过以下方式解决您的问题：添加和删除CSS类。

我在这里做了一个完整的JSFiddle，让您知道我在说什么。

将HTML公司Div修改为仅一个div，而不是两个div：

<div id="selecty" class="selectable_state" onclick=select_unselect('{$id7[i].iEmployerId}','{$smarty.section.i.index}') >
    Select
</div>

并修改了js：

function select_unselect(eid,compid){
    alert(eid);
    alert(compid);
    if ($(this).hasClass('selectable_state'))
    {
        $(this).removeClass('selectable_state');
        $(this).addClass('selected_state');
        $(this).html('Company Selected');
        $('#eid').val(eid);
    }else{
        $(this).removeClass('selected_state');
        $(this).addClass('selectable_state');
        $(this).html('Select');
        $('#eid').val('');        
    }
  }

附言：请注意，在提琴中我删除了该函数的一些参数以使其正常工作，因为我没有所有数据可以使其正常工作。