草庐IT

改变 this.style.backgroundImage 的 Javascript

coder 2025-01-12 原文

给定以下代码，我将如何完成 tileClick() 以便将点击的图像从“tileBack.jpg”更改为显示分配给该特定 div 的图像 在 shuffleDeck() 中？我的意思是，tileClick() 函数应该获取当前显示 tileBack 图像的图 block ，并在单击时显示该图 block “反面”的图像.

到目前为止，您可以看到我是如何尝试定位被单击的特定磁贴的，尽管我不确定此处是否正确使用了 this.。在该声明的另一边，我尝试做类似 = "../img/tile_"+tiles[i]+".png"; 的事情，但显然问题在于i 不存在于该函数的范围内。我的问题是我不知道如何重构我的代码，以便我可以访问以前分配给给定 div 的图像。作为引用，图 block 的“另一面”被命名为“tile_##.png”，其中“##”是一个 2 位数 (01-12)。

总体而言，我对 JS 和编程还很陌生，所以请让您的回答足够简单，以便我理解和实现。

var deck = [];
var tiles = [];
var sources = [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ];
var images = [];

const WIDTH = 100;
const HEIGHT = 100;
const NUMTILES = 24;

loadImages();
buildDeck();
shuffleDeck(7);
printDeck();

function loadImages() {
    for (var i = 0; i < sources.length; i++) {
        images[i] = "../img/tile_"+sources[i]+".png";
    }
}

function buildDeck() {
    for (var i = 0; i < 2; i++) {
        for (var j = 0; j < sources.length; j++) {
            var tempTile = {};
            tempTile.val = sources[j];
            tempTile.img = images[j];
            deck.push(tempTile);
        }
    }
}

function shuffleDeck (numTimes) {
    for (var i = 0; i < numTimes; i++) {
        for (var j = 0; j < deck.length; j++) {
            var tempTile = deck[j];
            var randI = j;
            while ( randI == j ) {
                randI = Math.floor(Math.random() * deck.length );
            }
            deck[j] = deck[randI];
            deck[randI] = tempTile;
        }
    }
}

function printDeck() {
    for (var i = 0; i < NUMTILES; i++) {
        tiles[i] = document.getElementById("tile"+i);
        console.log(deck[i].img);
        tiles[i].style.backgroundImage = "../img/tileBack.jpg";
    }
}

function tileClick() {
    document.querySelector(".tile").addEventListener("mousedown", function () {
          this.style.backgroundImage = 
    });
}

JS Fiddle 链接:http://jsfiddle.net/Leor6jqr/

最佳答案

添加事件监听器并将索引绑定(bind)到您的 Deck 打印中的调用事件。

function printDeck() {
    for (var i = 0; i < NUMTILES; i++) {
        tiles[i] = document.getElementById("tile"+i);
        console.log(deck[i].img);
        tiles[i].style.backgroundImage = "url('../img/tileBack.jpg')";
        tiles[i].addEventListener("mousedown", tileClick.bind(this, i));
    }
}

//  *** Game Functions *** //

function tileClick(index) {
    console.log('img', event, index, deck[index].img);
    tiles[index].style.backgroundImage = "url('"+deck[index].img+"')";
}

关于改变 this.style.backgroundImage 的 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29681849/

backgroundImageJavascript34codedeck

有关改变 this.style.backgroundImage 的 Javascript的更多相关文章

  1. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 你会如何在 Ruby 中表达成语 "with this object, if it exists, do this"？ - 2

    在Ruby(尤其是Rails)中，您经常需要检查某物是否存在，然后对其执行操作，例如:if@objects.any?puts"Wehavetheseobjects:"@objects.each{|o|puts"hello:#{o}"end这是最短的，一切都很好，但是如果你有@objects.some_association.something.hit_database.process而不是@objects呢？我将不得不在if表达式中重复两次，如果我不知道实现细节并且方法调用很昂贵怎么办？显而易见的选择是创建一个变量，然后测试它，然后处理它，但是你必须想出一个变量名(呃)，它也会在内存中

  4. ruby-on-rails - Rails - Carrierwave 进程抛出 ArgumentError : no images in this image list - 2

    在尝试实现应用auto_orient的过程之后!对于我的图片，我收到此错误:ArgumentError(noimagesinthisimagelist):app/uploaders/image_uploader.rb:36:in`fix_exif_rotation'app/controllers/posts_controller.rb:12:in`create'Carrierwave在没有进程的情况下工作正常，但在添加进程后尝试上传图像时抛出错误。流程如下:process:fix_exif_rotationdeffix_exif_rotationmanipulate!do|image|

  5. ruby - :this means in Ruby on Rails? 是什么 - 2

    我是Ruby和RubyonRails世界的新手。我已经阅读了一些指南，但我在使用以下语法时遇到了一些麻烦。我认为在Ruby中使用:condition语法来定义具有某种访问器的类属性，例如:classSampleattr_accessor:conditionend隐式声明“条件”属性的getter和setter。当我查看一些Rails示例代码时，我发现以下示例我并不完全理解。例如:@post=Post.find(params[:id])为什么它使用这种语法访问id属性，而不是:@post=Post.find(params[id])或者，例如:@posts=Post.find(:all):

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby - 无法加载此类文件——脚本/rails : Getting this error while remote debugging through RubyMine - 2

    我在通过RubyMineIDE进行远程调试时遇到以下错误。$bundleexecrdebug-ide--port1234--script/railsserverFastDebugger(ruby-debug-ide0.4.9)listenson:1234/home/amit/.rvm/gems/ruby-1.9.3-p125/gems/ruby-debug-ide19-0.4.12/lib/ruby-debug-ide.rb:123:in`debug_load'/home/amit/.rvm/gems/ruby-1.9.3-p125/gems/ruby-debug-ide19-0.4.

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐