jQuery show()/Hide()动态命名的元素 [英] jquery show()/Hide() dynamically named elements

问题描述

我正在尝试显示/隐藏有关特定事件的jQuery详细信息.我对jquery相当陌生，请原谅我的愚蠢.这些事件来自数据库并被动态加载.例如，我有一个事件，其eventID为23.我使用地点信息"和事件详细信息"下面的两个按钮加载有关事件的基本信息.

I am trying to show/hide details with jquery about a specific event. I am fairly new to jquery, so pardon my stupidness. The events come from a database and are dynamically loaded. For example I have an event with and eventID of 23. I load the basic information about the event with two buttons below "Venue Info" and "Event Details".

按钮的ID如23VenueBut和23EventBut.我想做的是，当单击按钮时，显示ID为23VenueDiv和23EventDiv的div，并将按钮更改为显示隐藏详细信息"的其他图像，然后再次单击以隐藏指定的div.

The buttons have IDs like 23VenueBut and 23EventBut. What I want to do is show the div with the ID of 23VenueDiv and 23EventDiv when the button is clicked and change the button to a different image that says Hide Details, etc and when clicked again hide the specified div.

<?php do { ?>
      <div id="scheduleMain"><?php if ($row_rsSchedules['Assoc1WebURL'] != "") { echo '<a href="'.$row_rsSchedules['Assoc1WebURL'].'">'; } ?><img src="images/schedules/<?php echo $row_rsSchedules['AssociationID']; ?>.png" border="0"><?php if ($row_rsSchedules['Assoc1WebURL'] != "") { echo '</a>'; } ?>
                  <?php 
            for ($i = 2; $i <= 5; $i++) {
                $var = 'Association'.$i.'ID';
                if ($row_rsSchedules[$var] != 0) { echo '<img src="images/schedules/'.$row_rsSchedules[$var].'.png">';
                } 
                }?><p>Click Logo to visit Association's Website (if available)</p></div>
        <div id="scheduleInfo"><h3><?php echo $row_rsSchedules['Assoc1Acronym']; ?> <?php echo $row_rsSchedules['EventName']; ?></h3><?php if ($row_rsSchedules['EventURL'] != "") { echo '<p><a href="'.$row_rsSchedules['EventURL'].'" target="_blank">Go To Event Website</a></p>'; } ?>
              <p><?php echo date("M j", strtotime($row_rsSchedules['DateFrom'])); ?> - <?php echo date("M j, Y", strtotime($row_rsSchedules['DateTo'])); ?></p>
              <p><?php echo $row_rsSchedules['LocationName']; ?>, <?php echo $row_rsSchedules['Location']; ?></p><p><img src="images/but_event_info.png" width="79" height="26" alt="Event Information" id="Event<?php echo $row_rsSchedules['EventID']; ?>But" /><img src="images/but_venue_info.png" width="79" height="26" alt="Specific Venue Information" id="Venue<?php echo $row_rsSchedules['VenueID']; ?>But" /></p>
              <div class="fullWidthDiv id="<?php echo 'Venue'.$row_rsSchedules['VenueID'].'Div'; ?>">Content for  class "fullWidthDiv" Goes Here</div>
              <div class="fullWidthDiv id="<?php echo 'Event'.$row_rsSchedules['EventID'].'Div'; ?>">Content for  class "fullWidthDiv" Goes Here</div>
        </div>
        <br class="clearFloat" />
      <div class="divider"></div>
      <?php } while ($row_rsSchedules = mysql_fetch_assoc($rsSchedules)); ?>

我什至不知道从哪里开始.

I don't even know where to start.

感谢您的帮助！

推荐答案

jQuery使这非常简单.似乎您可以一次在页面上显示多个事件描述，您可能希望将一个类"event"/"venue"附加到适当的按钮上，还应该首先将"hidden"类添加到所有这些类中，因为我认为它们全部开始隐藏，然后是这个JS:

jQuery makes this very simple. As it seems that you can multiple event descriptions on the page at once, you may want to attach a class, "event"/"venue" to the appropriate buttons, also add 'hidden' class to them all at first since I think they all start off hidden, then this JS:

$(".event.hidden").click(function () {
   $(this).siblings("div").show();
   $(this).removeClass('hidden').addClass('shown').text('Hide Event');
});
$(".event.shown").click(function () {
   $(this).siblings("div").hide();
   $(this).removeClass('shown').addClass('hidden').text('Event Details');
});

虽然按钮似乎不是div的同级物，但是您可以从给定的ID中解析正确的ID:

It seems like the button might not be the sibling of the div, though, but you can parse the right id from the given ID:

//In the 'click' functions:
var div_id = this.id.replace(/But/, 'Div');
$("#" + div_id).show(); // or .hide(), as appropriate.

这篇关于jQuery show()/Hide()动态命名的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！