Выбор div отменяет выбор других разделов, как радиокнопка?

Question

Я создал список дивы с помощью петли из базы данных ..

, когда я нажимаю select..it становится как

проблема я столкнулся в том, что в то время, я могу выбрать только одну компанию ... как я мог выбрать ругой компанию, которая сделает предыдущий выбранный Unselect компании ... программа, как это ...

{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

Посмотрите, его просто, вы можете просто решить проблему таким образом: Добавление и удаление CSS классов.

Я сделал полный JSFiddle here, чтобы вы знали, о чем я говорю.

Измененный HTML компании Div быть только один, а не два дивы:

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

И модифицировали ЯШ:

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: Пожалуйста, обратите внимание, что в fiddle я удалил некоторые параметры функции, чтобы заставить ее работать, потому что у меня нет всех данных, чтобы заставить ее работать правильно.

Answer 2

Если вы можете использовать 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», а затем добавить его к одному элементу вы щелкнули.

Он также поддерживает отмену выбора текущего элемента +, вы можете полностью удалить свои кнопки, чтобы щелкнуть мышью на div!

Вы должны иметь возможность настроить свой пример кода.

Все, что вам нужно сделать сейчас, это определить пользовательский класс для div, который отобразит его содержимое по-другому, как только покажет «компания выбрана», когда div имеет класс «selected».

Удачи и удачи!

Answer 3

Скажите, что у вас есть класс (selected_company) для выбранного подразделения компании. Когда кто-то выбирает любой другой div, тогда получите предыдущий выбранный div и удалите этот класс, а затем добавьте этот класс в текущий выбранный div.

Что-то вроде этого:

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

Тогда в то время только одна компания будет выбрана.

Вот пример дем: http://jsfiddle.net/kRD4S/

Answer 4

Ну немного модификация 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; 
} 

необходимости пройти еще один параметр при вызове функции (третьи пары) как ' это '

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

Сценарий выше wi ll сначала не отображает ни одного div с id selecty, ctable, selected_state, и это отображает блокировку выбранного div.

Надежда это поможет вам

Answer 5

думать об этом несколько иначе. Если выбрана компания 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"); 
});