jQuery找到最接近的按钮并触发单击

Question

I'm using Darkroom JS to crop / manipulate images on the fly. However, I need the canvas to be saved (Via the floppy disk in the toolbar) before I process the image as base64.

I thought I would try it with JQuery and target the particular element, However Darkroom doesn't give the toolbar items a specific class.

So I'm looking at finding it via jQuery closest or similar and then triggering the click.

The HTML that Darkoom Produces is as follows :

<div class="darkroom-container">
  <div class="darkroom-toolbar">
    <div class="darkroom-button-group">
      <button type="button" class="darkroom-button darkroom-button-default" disabled="">
      <svg class="darkroom-icon">
        <use xlink:href="#undo"/>
      </svg>
      </button>
      <button type="button" class="darkroom-button darkroom-button-default" disabled="">
      <svg class="darkroom-icon">
        <use xlink:href="#redo"/>
      </svg>
      </button>
    </div>
    <div class="darkroom-button-group">
      <button type="button" class="darkroom-button darkroom-button-default">
      <svg class="darkroom-icon">
        <use xlink:href="#rotate-left"/>
      </svg>
      </button>
      <button type="button" class="darkroom-button darkroom-button-default">
      <svg class="darkroom-icon">
        <use xlink:href="#rotate-right"/>
      </svg>
      </button>
    </div>
    <div class="darkroom-button-group">
      <button type="button" class="darkroom-button darkroom-button-default darkroom-button-active">
      <svg class="darkroom-icon">
        <use xlink:href="#crop"/>
      </svg>
      </button>
      <button type="button" class="darkroom-button darkroom-button-success">
      <svg class="darkroom-icon">
        <use xlink:href="#done"/>
      </svg>
      </button>
      <button type="button" class="darkroom-button darkroom-button-danger">
      <svg class="darkroom-icon">
        <use xlink:href="#close"/>
      </svg>
      </button>
    </div>
    <div class="darkroom-button-group">
      <button type="button" class="darkroom-button darkroom-button-default">
      <svg class="darkroom-icon">
        <use xlink:href="#save"/>
      </svg>
      </button>
    </div>
  </div>
  <div class="darkroom-image-container">
    <div class="canvas-container" style="width: 556px; height: 556px; position: relative; -moz-user-select: none;">
      <canvas class="lower-canvas" style="position: absolute; width: 556px; height: 556px; left: 0px; top: 0px; -moz-user-select: none;" width="556" height="556"></canvas>
      <canvas class="upper-canvas " style="position: absolute; width: 556px; height: 556px; left: 0px; top: 0px; -moz-user-select: none; cursor: crosshair;" width="556" height="556"></canvas>
    </div>
  </div>
  <div class="darkroom-source-container" style="display: none;">
    <div class="canvas-container" style="width: 600px; height: 600px; position: relative; -moz-user-select: none;">
      <canvas class="lower-canvas" style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none;" width="600" height="600"></canvas>
      <canvas class="upper-canvas " style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none;" width="600" height="600"></canvas>
    </div>
  </div>

I can get into the 4th button group using :

var button_group = $('.darkroom-button-group').eq(3);

But I am struggling to trigger the button.

My current jQuery is as follows :

    var button_group = $('.darkroom-button-group').eq(3);

    button_group.closest('.darkroom-button').trigger('click');

Answer 1

Closest will search for the parent elements. In your case, you need to search for the child elements. for that you can use .find() . Then your code will be,

button_group.find('.darkroom-button:first').trigger('click');

This will trigger the jquery click handler.

If you dont have the click event handler, then you can try the DOM click,

button_group.find('.darkroom-button')[0].click()

Answer 2

我认为您现在可以获取按钮，只需过滤按钮的属性，然后

$("attribute ").closest('.darkroom-button').trigger('click');