如何浏览媒体播放器主题上的下一个和上一个消息按钮

How to navigate through next and previous message button on media player theme?

本文关键字：下一个 上一个 按钮 消息 何浏览 浏览 媒体播放器      更新时间：2023-09-26

EDIT:我编辑了以下问题中的代码。我所做的是，在数组中一次从数据库中获取所有消息，然后在选框标签中显示所有消息，代码如下:

$player_msg = array();
$qgetplayermsg = mysql_query("SELECT * FROM player_message WHERE is_active = 1 ORDER BY msg_id DESC");
while($playermsg = mysql_fetch_array($qgetplayermsg)){
    array_push($player_msg, $playermsg['message']);
}

Then in player:

<!--FLASH PLAYER START //////////////////-->
        <div class="message_flashing">
            <div class="message_navigation">
                <ul>
                    <li id="stop"><a href="#" title="Stop" onClick="document.getElementById('mq_msg').setAttribute('scrollamount', 0, 0);"><img src="images/player/stop.png" /></a></li>
                    <li><a href="#" title="Previous Message" class="previousMessage" rel="0"><img src="images/player/backward.png" /></a></li>
                    <li id="pause"><a href="#" title="Pause" onClick="document.getElementById('mq_msg').setAttribute('scrollamount', 0, 0);"><img src="images/player/pause.png" /></a></li>
                    <li id="play"><a href="#" title="Pause" onClick="document.getElementById('mq_msg').setAttribute('scrollamount', 1, 0);"><img src="images/player/play.png" /></a></li>
                    <li><a href="#" title="Next Message" class="nextMessage" rel="0"><img src="images/player/forward.png" /></a></li>
                </ul>
            </div>
            <div class="flash_text">
            
            <? for($p=0; $p<(count($player_msg)); $p++){?>
                <marquee scrollamount="1" id="mq_msg" class="pl_msg_id_<?=$p;?>">&diams;<?=$player_msg[$p];?></marquee>
            <? } ?>
            
            </div>
        </div>
        <!--FLASH PLAYER ENDS //////////////////-->

我使用以下jQuery代码来操纵消息通过播放器按钮:

<script type="text/javascript">
$(document).ready(function(){
    //alert("sdsdsdsd");
    <? for($a=0; $a<(count($player_msg)); $a++){?>
    
        $(".pl_msg_id_<?=$a;?>").hide();
        
    <? } ?>
        
        $(".pl_msg_id_0").show();
      
      
        $('.nextMessage').click(function () {
            
            var pl_msg_id = parseInt($(this).attr('rel'),10);
            
            if(pl_msg_id < <?=count($player_msg)-1;?>){
    
                $(".pl_msg_id_"+pl_msg_id).hide();
                
                pl_msg_id = ++pl_msg_id;
                alert("pl_msg_id_"+pl_msg_id);
                $(".nextMessage").attr("rel", pl_msg_id);
                $(".previousMessage").attr("rel", pl_msg_id);
                
                $(".pl_msg_id_"+pl_msg_id).show();
                
            } else if(pl_msg_id > <?=count($player_msg)-1;?>){
                
                $("#mq_msg").attr('class', "pl_msg_id_"+<?=count($player_msg)?>);
                $("#mq_msg").html("No more messages!");
                
                }//end of if
            
        });
        
        $('.previousMessage').click(function () {
            
            var pl_msg_id = parseInt($(this).attr('rel'),10);
            
            if(pl_msg_id != -1){
    
                $(".pl_msg_id_"+pl_msg_id).hide();
                
                pl_msg_id = --pl_msg_id;
                alert(pl_msg_id);
                
                $(".nextMessage").attr("rel", pl_msg_id);
                $(".previousMessage").attr("rel", pl_msg_id);
                
                $(".pl_msg_id_"+pl_msg_id).show();
                
            } else if(pl_msg_id == -1) {
                
                $("#mq_msg").attr('class', "pl_msg_id");
                $("#mq_msg").html("No more messages!");
                
                }//end of if//end of if
        });
});
        
</script>

现在我面临的问题是，当显示另一个选框并隐藏前一个时，文本不会浮动或移动或行走。其次，ELSE IF块在nextMessage和previousMessage点击函数中不起作用。请指导。

好的，评论中的讨论提供了本应出现在问题中的额外信息。有了这些额外的信息，答案就可能了:

你必须确保消息出现在html标记中，否则你不能通过js直接显示它们。请记住，php只在请求之后执行一次。如果你只嵌入第一个消息到html标记，那么其余的是丢失。因此，您要么稍后获取它们，要么必须在html标记中嵌入所有消息。嵌入所有邮件更容易，但无法访问在页面加载后写入的新邮件。

像这样改变html脚本的底部以嵌入所有消息，而不仅仅是第一个:

<div class="flash_text">
    <input type="hidden" id="mg_msg_key" value="0">
    <?php 
        foreach ($player_msg as $key=>$val)
            sprintf('<marquee scrollamount="1" id="mq_msg_%s" class="%s">&diams;%s</marquee>'."'n", 
                    $key, (0==$key)?'':'mg_msg_hidden', htmlspecialchars($val) );
    ?>
</div>

请注意，有一个额外的隐藏输入字段保存当前可见消息的键。此外，除了第一个消息外，所有消息都有一个额外的css类mg_msg_hidden。你现在可以在css级别上使用这个类来隐藏除第一条消息以外的所有消息，方法是将它添加到css规则集中:

.mg_msg_hidden{
    display: none;
}

完成后，只有第一个消息是可见的，其余的是存在的(在html标记中检查!)但不可见。这是您现在可以使用js控制单个消息可见性的起点。把你的js改成这样:

<script language="javascript">
    function showMessage(key){
        $('html div.flash_text marquee').addClass('mg_msg_hidden');
        $('html div.flash_text marquee#mq_msg_'+key).removeClass('mg_msg_hidden');
    }
    function nextMessage(){
        var key='html div.flash_text input#mg_msg_key';
        $(key).val($(key).val()+1);
        showMessage($(key).val());
    }
    function previousMessage(){
        var key='html div.flash_text input#mg_msg_key';
        $(key).val($(key).val()-1);
        showMessage($(key).val());
    }
</script>

这显然只是一个起点。我没有测试过这些行，而是从头开始写的。它们可能包含语法错误等。您必须根据需要调整和扩展该方法。

我还使用JQuery符号以更方便的方式访问元素。你应该考虑在你的项目中使用这样一个js库:当你的脚本变得有点复杂时，它为你节省了很多麻烦。

相关文章：