javascript - 选择一个 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

假设您有一个用于所选公司 div 的类 (selected_company)。当有人选择任何其他 div 时，然后获取先前选择的 div 并删除此类，然后将此类添加到当前选择的 div 中。

像这样:

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

那么一次只会选择一家公司。

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