Question

我使用数据库中的循环创建了一个div列表。 enter image description here

当我点击选择..变得像 enter image description here

我面临的问题是，我一度只能选择一家公司......我怎样才能选择一家公司，让以前选定的公司取消选择...... 程序是这样的......

{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具有“已选择”类时，只显示“公司选中”。

玩得开心，祝你好运！

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;
 }

需要在函数调用期间（第3个参数）将另一个参数传递为“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 here让你知道我在说什么。

将HTML公司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('');        
    }
  }

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

选择一个div取消选择其他div如单选按钮？

5 个答案: