如何在onclick函數中選擇動態div

Question

這將在表中打印div的數量。

    <table>
<c:forEach var="events" items="${map.theme}">
<tr><td><div id="new" class="cls" style="width: 100px;height: 100px;background-color:red;" onclick="changedropdown('${events.themeid}');">You have selected <strong>red option</strong> so i am here</div></td>
</tr>
</c:forEach>
</table>

然后這也會在下拉列表中打印相同的結果

<div class="sel">
   <select class="form-control" id="theameselect">

<c:forEach var="events" items="${map.theme}">
      <option value="${events.themeid}">${events.themename}</option>

</c:forEach>
</select>
</div> 

當我單擊div時，將使用此功能將相應的選項設置為下拉列表中的選定選項。然后嘗試更改所選div的css。

 <script type="text/javascript">
 function changedropdown(themeid){
//set selected div values as selected in dropdown.Working well
var v=themeid;
$("div.sel select").val(v);
//it is not working well.
     $('.cls').addClass('v');
     $('.v').css("border", "14px double green");
     $('.cls').removeClass('v');

    }
</script>

但是它改變了所有的div CSS。 1）我需要在此功能中更改所選div的css。

Answer 1

的HTML

 <div themeid="'${events.themeid}'" id="new" class="cls" style="width: 100px;height: 100px;background-color:red;" onclick="changedropdown('${events.themeid}');">You have selected <strong>red option</strong> so i am here</div>

JS

$('.cls[themeid="'+v+'"]').addClass('v');
...

示例： http : //jsfiddle.net/3h11vqkq/

Answer 2

是的，因為changedropdown函數綁定了所有div。 您必須傳遞每個元素才能使用$(this)

<div id="new" class="cls" style="width: 100px;height: 100px;background-color:red;" onclick="changedropdown($(this),'${events.themeid}');">You have selected <strong>red option</strong> so i am here</div>

現在您已經選擇了功能元素。您可以更改所選元素上的內容。 這是一個例子：

function changedropdown(selectedElement, themeid)
{
   selectedElement.css("color","red");
}

Answer 3

我將一個參數傳遞給上述答案的函數。

onclick="changedropdown('${events.themeid}',this);"

也可以使用它來選擇div

$(element).css("border", "14px double green"); 

然后要一次選擇一個div，請先刪除類名稱並添加css，然后再添加類名稱作為前一個腳本。

function changedropdown(themeid,element){
$(element).css("border", "14px double green");
    $(element).removeClass('cls');
     var v=themeid;
     $("div.sel select").val(v);
     $(".cls").css("border", "0");
     $(element).addClass('cls');
}

謝謝大家。