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 回答