Search jQuery

jQuery Forum

How to implement if else statement in a jquery click event function?

in Using jQuery • 8 years ago

I had searched a code in jquery that will access a div element inside the td element of the table that when a button is click. Below is my code to open the div element which is inside the td element of the table when the input button is clicked and it got working. However, I need to implement the if else statement inside that jquery code so that I can close back the div element when the button is click again. So, how can I implement this if else statement using these code below?

jQuery:

$(function () {
$('.Reply').click(function () {
$(this).closest('p').next('.divrep').show();
});

HTML:

<table id="mytable">
@foreach (var item in Model.Comments )
{
<tr >
<td class="tdstyle" >
<div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item.name) </div>
<p class="minimize" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px; display :block; background-color: #CCCCFF"> @Html.DisplayFor(modelItem => item.comment) </p>
<p style="margin-top:2px;margin-bottom:0px"> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)" style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>
<div class ="divrep" style="display:none; position:relative;left:50px; overflow:auto;margin-top:0px;margin-bottom:0px">
<table>
@foreach (var item2 in Model.Replies.Where(r => r.idrep == item.Id))
{
<tr >
<td >
<div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.namerep) </div>
<p class="minimize" style ="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px; display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem=>item2.reply) </p>
</td>
</tr>
}
</table>
@using (Html.BeginForm("PostComment", "Profile", FormMethod.Post, new { }))
{
<div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">
<input type="text" id="comidvalue" name="idrep" value="@Html.DisplayFor(modelItem=>item.Id)" />
<span class="field-validation-valid" data-valmsg-for="idrep" data-valmsg-replace="true"></span>
</div>
<br />
<input type="text" id="namerep" name="namerep" />
<span class="field-validation-valid" data-valmsg-for="namerep" data-valmsg-replace="true"></span>
<br />
<textarea id="reply" name="reply" style="width:445px;height:100px;resize:none" ></textarea>
<span class="field-validation-valid" data-valmsg-for="reply" data-valmsg-replace="true"></span>
<input type="submit" value="Post Reply" name="butname" />
}
<br />
</div>
</td>
</tr>
}
</table>

Replies(1)

dsvick

Re: How to implement if else statement in a jquery click event function?

8 years ago

When you're posting markup don't post the server side code, all jQuery cares about is the markup that is actually sent to the browser. Not everyone here knows all the server side languages but everyone is familiar with the client side markup, so you're more likely to get an answer by posting just what is sent to the browser.

You have a couple of different elements with the same names, that may cause problems with your form or other things you're trying to do.

From what you're describing, this should work for you:

$('.Reply').click(function () {
$(this).closest('p').next('.divrep').toggle(!$(this).closest('p').next('.divrep').is(":visible"));
});

Dave

Top Reply

Response title

Attachments

jQuery Forum

How to implement if else statement in a jquery click event function?

Replies(1)

Re: How to implement if else statement in a jquery click event function?

Statistics

Tags

Actions