0

在我的移动应用程序中,我需要在网页周围移动绿色图像。当绿色图像悬停在提交按钮上时,按钮将显示“提交?”,当用户将绿色图像放在提交按钮上时,按钮将变为橙色。

这是图片:

第一张图片是用户丢弃绿色图像时

第二个显示当绿色图像悬停在按钮上时,按钮应该显示什么

问题是当绿色图像悬停在按钮上时,按钮无法更改,只有当我触摸按钮时它才能更改。我尝试过 hover() 和 mouseover() 方法,都没有用。它是jQuery Mobile,在我的 PC 版本中,一切运行良好,但移动应用程序不同。

那么,当绿色图像悬停在按钮上时,我该怎么做才能显示“提交?”?或者当绿色图像悬停在其中一个对象上时,有什么方法可以检测对象是“是”还是“否”按钮?

这是代码:拖放方法来自另一个JS文件,但不应该影响这个问题。

id = "html";
    $(id).ready(function (e) {

$('.yes').bind('mouseover', function( event, ui ){
    $('.yes').attr("src","images/submit_confirm.png");
    $('input[name=stimulusResponse]').val("yes");
    $('.no').attr("src","images/no.png");
});
$('.no').mouseover(function( event, ui ){
    $('.no').attr("src","images/submit_confirm.png");
    $('input[name=stimulusResponse]').val("no");
    $('.yes').attr("src","images/yes.png");
});

$('.bottomGoButton').drag(function( ev, dd ){
    $( this ).css({
        top: dd.offsetY,
        left: dd.offsetX
    });
    $(this).bind('vmousemove', function(event) {
        $('input[name=test]').val(event.pageX + ", " + event.pageY + $('input[name=test]').val());
    });
});

$('.no').drop(function(){
     $('input[name=stimulusResponse]').val("no");
     $('.no').attr("src","images/submitted_no.png");         
});

$('.yes').drop(function(){
     $('input[name=stimulusResponse]').val("yes");
     $('.yes').attr("src","images/submitted_yes.png");       
});             

});

4

1 回答 1

1

我自己解决了这个问题,通过使用按钮的位置和鼠标进行每个操作,这增加了更多的灵活性。

以下是部分代码: 1. 这是获取顶部、左侧、右侧、底部参数的方法:

var yesPosition = $('.yes').position(), noPosition = $('.no').position(),
                yesWidth = $('.yes').width(), yesHeight = $('.yes').height(),
                noWidth = $('.no').width(), noHeight = $('.no').height();
            //get the relative position of yes/no button
            var yesTop = yesPosition.top, yesLeft = yesPosition.left, 
                yesBottom = yesTop + yesHeight, yesRight = yesLeft + yesWidth,
                noTop = noPosition.top, noLeft = noPosition.left,
                noBottom = noTop + noHeight, noRight = noLeft + noWidth;    

/ 2.这是hover()方法的替代,只有当鼠标移动并且在其中一个按钮的范围内时,我们才能做我们想要的操作,很酷吧:) /

if(isMouseUp == false && event.pageX >= yesLeft && event.pageX <= yesRight && event.pageY >= yesTop && event.pageY <= yesBottom) {
                            $('input[name=test]').val("X: " + event.pageX + ", " + event.pageY); 
                            $('.yes').attr("src","images/submit_confirm.png");
                            $('input[name=stimulusResponse]').val("yes hover");
                            $('.no').attr("src","images/no.png");
                        }
                        else if (isMouseUp == false && event.pageX >= noLeft && event.pageX <= noRight && event.pageY >= noTop && event.pageY <= noBottom) {
                            $('input[name=test]').val("X: " + event.pageX + ", " + event.pageY); 
                            $('.no').attr("src","images/submit_confirm.png");
                            $('input[name=stimulusResponse]').val("no hover");
                            $('.yes').attr("src","images/yes.png");
                        }
                        else {
                            $('input[name=stimulusResponse]').val("");
                            $('.yes').attr("src","images/yes.png");
                            $('.no').attr("src","images/no.png");
                        }
于 2013-06-27T07:36:15.737 回答