Question

我昨天问了这个问题得到了一个很好的答案，但无法弄清楚如何重新发布新代码以获得有关相同代码的另一个问题的答案。我有按钮，我想显示/隐藏divs与特定事件/场地的信息。

这是按钮html：

<img class="event" src="images/but_event_info.png" width="79" height="26" alt="Event Information" id="Event<?php echo $row_rsSchedules['EventID']; ?>But" /><img class="venue" src="images/but_venue_info.png" width="79" height="26" alt="Specific Venue Information" id="Venue<?php echo $row_rsSchedules['VenueID']; ?>But" /></p>

我要展示的div：

<div class="VenueInfo" id="<?php echo 'Venue'.$row_rsSchedules['VenueID'].'Div'; ?>">Venue Info for <?php echo $row_rsSchedules['VenueID']; ?></div>
<div class="EventInfo" id="<?php echo 'Event'.$row_rsSchedules['EventID'].'Div'; ?>">Event Info for <?php echo $row_rsSchedules['EventID']; ?></div>

这是显示/隐藏div的jquery代码：

<script type="text/javascript">
$(document).ready(function() {
   $(".event.hidden").click(function () {
    var div_id = this.id.replace(/But/, 'Div');
$("#" + div_id).show('fast', 'linear'); 
   //$(this).siblings("div").show();
   $(this).removeClass('hidden').addClass('shown').text('Hide Event');
});
$(".event.shown").click(function () {
   var div_id = this.id.replace(/But/, 'Div');
 $("#" + div_id).hide('fast', 'linear'); 
   //$(this).siblings("div").hide();
   $(this).removeClass('shown').addClass('hidden').text('Event Details');
});

});
</script>

我在jquery show()/Hide() dynamically named elements

给出了答案

坦都给出的答案是： jQuery使这很简单。由于您似乎可以同时在页面上显示多个事件描述，因此您可能需要在适当的按钮上附加一个类“事件”/“场所”，并且首先为它们添加“隐藏”类，因为我认为它们所有开始隐藏，然后这个JS：

我只是简单地添加了样式设置：

<style type="text/css"> 
.VenueInfo {
 display: none;
}
.EventInfo {
 display: none;
}
.event {
 display: inline;
}

.event {
 display: inline;
}
</style>

请原谅我在对同一个问题进行更改后不知道如何重新发布新代码。每次我发布问题，我都会得到答案，然后在做出更改后再也没有回复。

我提前感谢您的帮助。

Answer 1

我不确定你在问什么，我猜你再次显示div有问题，所以改为

display: block;

您当前的

 display: inline;

编辑，您还需要根据要添加/删除Jquery的类来命名CSS类

所以你的css应该有

.show{ display: block;}
.hidden { display: none; }

JQuery显示/隐藏问题

1 个答案: