Question

我的jQuery在悬停时将气泡交换为更加彩色的图形，但我无法弄清楚如何添加“点击”功能以突出显示用户选择的气泡。如果一个人点击其中一个气泡，它应该留在那个色彩鲜艳的悬停图形中。这有意义吗？

我的HTML有4个图像设置，可用作页面内导航。它们是图形气泡。我给每个泡泡它自己的ID。

#include<stdio.h>
#include<stdlib.h>
#include<iostream.h>
#include<dos.h>

typedef struct PCB_struct {
    unsigned ss;
    unsigned sp;
    unsigned finished;
    unsigned quant;
} PCB;

#define DISABLE_INTERRUPT  asm cli
#define ENABLE_INTERRUPT  asm sti
PCB *threads[4];
volatile unsigned addressOfInterruptVector = 0x08;
volatile unsigned adressOfFreePlaceForInterrupt = 0x60;
volatile unsigned numberOfInterrupts=0;
volatile PCB *activeThread;
volatile unsigned activeThreadNumber=0;
volatile unsigned numberOfFinishedThreads=0;
volatile int necessarilyContextSwitch=0;

PCB* returnNextThread() {
    if(activeThreadNumber==0) {
        if(threads[1]->finished==0) {
            activeThreadNumber=1;
            return threads[1];
        }
        else if(threads[2]->finished==0) {
            activeThreadNumber=2;
            return threads[2];
        }
        else if(threads[3]->finished==0) {
            activeThreadNumber=3;
            return threads[3];
        }
        else {
            activeThreadNumber=0;
            return threads[0];
        }
    }
    else if(activeThreadNumber==1) {
        if(threads[2]->finished==0) {
            activeThreadNumber=2;
            return threads[2];
        }
        else if(threads[3]->finished==0) {
            activeThreadNumber=3;
            return threads[3];
        }
        else {
            activeThreadNumber=0;
            return threads[0];
        }
    }
    else if(activeThreadNumber==2) {
        if(threads[1]->finished==0) {
            activeThreadNumber=1;
            return threads[1];
        }
        else if(threads[3]->finished==0) {
            activeThreadNumber=3;
            return threads[3];
        }
        else {
            activeThreadNumber=0;
            return threads[0];
        }
    }
    else if(activeThreadNumber==3) {
        if(threads[2]->finished==0) {
            activeThreadNumber=2;
            return threads[2];
        }
        else if(threads[1]->finished==0) {
            activeThreadNumber=1;
            return threads[1];
        }
        else {
            activeThreadNumber=0;
            return threads[0];
        }
    }
    activeThreadNumber=0;
    return threads[0];
}

unsigned tmpSs=0;
unsigned tmpSp=0;
void interrupt timerISR() {
    if(!necessarilyContextSwitch) numberOfInterrupts--;
    if(numberOfFinishedThreads<3 && (numberOfInterrupts==0 || necessarilyContextSwitch==1)) {
        asm {
            mov tmpSs,ss
            mov tmpSp,sp
        }
        activeThread->ss=tmpSs;
        activeThread->sp=tmpSp;
        activeThread=returnNextThread();
        tmpSs=activeThread->ss;
        tmpSp=activeThread->sp;
        numberOfInterrupts=activeThread->quant;
        asm {
            mov ss,tmpSs
            mov sp,tmpSp
        }
    }
    if(!necessarilyContextSwitch) asm int 60h;
    necessarilyContextSwitch=0;
}

unsigned oldRoutineOffset, oldRoutineSegment;

void initNewRoutine() {
    unsigned offsetAddress=addressOfInterruptVector*4;
    unsigned segmentAddress=addressOfInterruptVector*4+2;
    unsigned emptyOffset=adressOfFreePlaceForInterrupt*4;
    unsigned emptySegment=adressOfFreePlaceForInterrupt*4+2;
    DISABLE_INTERRUPT 
    asm {
        push es
        push ax
        push di
        mov ax,0
        mov es,ax

        mov di, word ptr segmentAddress
        mov ax, word ptr es:di
        mov word ptr oldRoutineSegment, ax
        mov word ptr es:di, seg timerISR

        mov di, word ptr offsetAddress
        mov ax, word ptr es:di
        mov word ptr oldRoutineOffset, ax
        mov word ptr es:di, offset timerISR

        mov di, word ptr emptyOffset
        mov ax, word ptr oldRoutineOffset
        mov word ptr es:di, ax
        mov di, word ptr emptySegment
        mov ax, word ptr oldRoutineSegment
        mov word ptr es:di, ax

        pop di
        pop ax
        pop es
    }
    ENABLE_INTERRUPT 
}

void returnOldRoutine() {
    unsigned offsetAddress=addressOfInterruptVector*4;
    unsigned segmentAddress=addressOfInterruptVector*4+2;
    DISABLE_INTERRUPT 
    asm {
        push es
        push ax
        push di

        mov ax,0
        mov es,ax

        mov di, word ptr segmentAddress
        mov ax, word ptr oldRoutineSegment
        mov word ptr es:di, ax

        mov di, word ptr offsetAddress
        mov ax, word ptr oldRoutineOffset
        mov word ptr es:di, ax

        pop di
        pop ax
        pop es
    }
    ENABLE_INTERRUPT 
}

int finishThread() {
    necessarilyContextSwitch=1;
    DISABLE_INTERRUPT 
    activeThread->finished=1;
    cout << "Thread " << activeThreadNumber << " finished." << endl;
    ENABLE_INTERRUPT 
    timerISR();
    return 0;
}

void function1() {
    for(int i=0;i<30;i++) {
        cout << "Execution: function 1: " << i << endl;
        for(int j=0;j<10000;j++) {
            for(int k=0;k<30000;k++);
        }
    }
    finishThread();
}

void function2() {
    for(int i=0;i<30;i++) {
        cout << "Execution: function 2: " << i << endl;
        for(int j=0;j<10000;j++) {
            for(int k=0;k<30000;k++);
        }
    }
    finishThread();
}

void function3() {
    for(int i=0;i<30;i++) {
        cout << "Execution: function 3: " << i << endl;
        for(int j=0;j<10000;j++) {
            for(int k=0;k<30000;k++);
        }
    }
    finishThread();
}

void createProcess(PCB *block, void (*method)()) {
    unsigned* st1 = new unsigned[1024];

    st1[1023] = 0x200;          
    st1[1022] = FP_SEG(method);
    st1[1021] = FP_OFF(method);

    block->sp = FP_OFF(st1+1012);
    block->ss = FP_SEG(st1+1012);
    block->finished=0;
}

void mainThread() {

    for(int i=0;i<30;i++) {
        DISABLE_INTERRUPT 
        cout << "Main Thread: " << i << endl;
        ENABLE_INTERRUPT 
        for(int j=0;j<30000;j++) {
            for(int k=0;k<30000;k++);
        }
    }
}

int main() {
    DISABLE_INTERRUPT 
    threads[1]=new PCB();
    createProcess(threads[1], function1);
    threads[1]->quant=20;

    threads[2]=new PCB();
    createProcess(threads[2], function2);
    threads[2]->quant=40;

    threads[3]=new PCB();
    createProcess(threads[3], function3);
    threads[3]->quant=20;

    threads[0]=new PCB();
    activeThread=threads[0];
    activeThreadNumber=0;
    activeThread->quant=20;
    numberOfInterrupts=activeThread->quant;
    ENABLE_INTERRUPT 
    initNewRoutine();
    mainThread();
    returnOldRoutine();
    cout << "Main program finished." << endl;
    return 0;
}

$( ".WORLD-BTNS" ).hover(
  function() {
     var id = $(this).attr('id');
    $(this).attr("src","images/buttons/" + id + "-BTN-HOVER.png");
  }, function() {
    var id = $(this).attr('id');
    $(this).attr("src","images/buttons/" + id + "-BTN.png");
  }
)

VIEW THE COLOR BTN

VIEW THE COLOR BTN HOVER

Answer 1

您可以通过让您的点击处理程序向相关元素添加一个类来解决此问题，然后让您的悬停函数排除该类的元素。

这样的事情应该有效：

clusterExport

$('.some-container')
.on('mouseover', '.WORLD-BTNS:not(.selected)', function() {
    this.src = 'http://via.placeholder.com/100x100?text='+this.id+' hovered';
})
.on('mouseleave', '.WORLD-BTNS:not(.selected)', function() {
    this.src = 'http://via.placeholder.com/100x100?text='+this.id+' normal';    
})
.on('click','.WORLD-BTNS:not(.selected)',function() {
    var $this=$(this);
    $(".WORLD-BTNS.selected")
    .attr('src', 'http://via.placeholder.com/100x100?text='+this.id+' normal')
    .removeClass('selected'); 
    $this.addClass('selected'); 
    this.src = 'http://via.placeholder.com/100x100?text='+this.id+' selected';    
});

img{
  margin:10px;
}

Answer 2

这很完美，请测试并回复我：

    $("document").ready(function(){
    sessionStorage.clear();
    $( ".WORLD-BTNS" ).on("click", function() {
        var ai= $(".WORLD-BTNS").length;
        for (var i=0 ; i<ai ; i++) {// Clear anyone clicked before. 
            $(".WORLD-BTNS").eq(i).attr("src", "images/buttons/" 
                + $(".WORLD-BTNS").eq(i).attr("id") + "-BTN.png");
        }

        var id =  $(this).attr('id') ;
        $(this).attr("src", "images/buttons/" + id + "-BTN-HOVER.png");
        sessionStorage.setItem("clicked",id);
    });

    $(".WORLD-BTNS").hover(function () {// Hover effects.
          var id =  $(this).attr('id') ;
            $(this).attr("src", "images/buttons/" + id + "-BTN-HOVER.png");
    } , function () {
          var id =  $(this).attr('id') ;
          if(sessionStorage.getItem("clicked")!=id)
                $(this).attr("src", "images/buttons/" + id + "-BTN.png");
    });
});

<html>
<img class="WORLD-BTNS" id="COLOR"  src="images/buttons/COLOR-BTN.png" />
<img class="WORLD-BTNS" id="SKINCARE" src="images/buttons/SKINCARE-BTN.png" />
<img class="WORLD-BTNS" id="FRAGRANCE" src="images/buttons/FRAGRANCE-BTN.png" />
<img class="WORLD-BTNS" id="HAIRCARE" src="images/buttons/HAIRCARE-BTN.png" />

PS。这个想法;保留Clicked项目ID供以后检查，我建议使用“sessionStorage”作为前面的例子，

如何在此jQuery函数中添加“click”函数？

2 个答案: