Question

我试图用jquery显示/隐藏有关特定事件的详细信息。我对jquery很新，所以原谅我的愚蠢。事件来自数据库并动态加载。例如，我有一个事件，事件ID为23.我在“场地信息”和“事件详细信息”下面有两个按钮，加载有关事件的基本信息。

按钮的ID为23VenueBut和23EventBut。我想要做的是在单击按钮时显示ID为23VenueDiv和23EventDiv的div，并将按钮更改为隐藏详细信息等的其他图像，再次单击时隐藏指定的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)); ?>

我甚至不知道从哪里开始。

感谢您的帮助！

Answer 1

<A ID="categoryContainerToggle" CLASS="standardLink">Hide</A>&nbsp;</TD>


Toggle the changes base on your event 23EventBut

$("#categoryContainerToggle").click(function() {            
        if ($('a#categoryContainerToggle').text()== showText) {
            $('a#categoryContainerToggle').text("Your Hide text here base on your id");
        }else {
            $('a#categoryContainerToggle').text("Your show text here base on your id");
        }           
        $("#categoryContainer").toggle();           
    });

Answer 2

因为它们是动态添加的元素，您需要使用jquery live

 $('#buttondiv').live('click', function() {
    $('#23VenueBut').show();
    $('#23EventBut').show();
    $(this).removeClass('oldclass').addClass('newClass')
    });

使用一个图像维护一个类，使用另一个隐藏的详细信息图像维护一个类，并添加和删除类dynamicall

Answer 3

首先，您的id属性无效。 ID不应该以数字开头。

您可以使用.toggle()功能

$("#yourbuttonid").toggle(function(){
   $("#venuediv").show();
   $("#eventdiv").show();
   $(this).attr("src", "new image source");
},
function(){
   $("#venuediv").hide();
   $("#eventdiv").hide();
   $(this).attr("src", "old image source");
});

Answer 4

//Your code should end up looking something like.. 

$('#23VenueBut').live("click", function(e){
    $('#23VenueDiv').toggle();
    $(this).text(if($(this).css('display') == 'none') ? "Show Venue" : "Hide Venue");
});

Answer 5

jQuery使这非常简单。由于您似乎可以同时在页面上显示多个事件描述，因此您可能需要在适当的按钮上附加一个类“事件”/“场所”，并且首先为它们添加“隐藏”类，因为我认为它们所有开始隐藏，然后这个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：

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

jquery show（）/ Hide（）动态命名的元素

5 个答案: