Question

我的html代码有X个元素，其id为以下形式：

viewer_mX

这里，X是从1到m的数字（m每次可以不同）。

当有人点击其中一个元素时，我想使用javascript来获取相应元素的数字X.

我意识到我应该使用包含该数字的类（.viewer）和id（#x）。但是，我使用一个库来生成html元素，我坚持使用这个协议，并且必须充分利用它。

这是我到目前为止的javascript：

$(document).ready(function () {
  $("#viewer>...").click(function () {
    x = ...
    var number = x;
  });
});

此代码中缺少的内容（由3个点表示）是查看器不是完整的ID，但可以在后面添加某些内容。我想存储点击的div之后的数字，但我无法确定使用哪个函数。

Answer 1

为什么不使用class来标识元素，然后使用data-attribute来存储你的id（例如data-id），然后获取这个数据属性的值？

否则我会亲自使用这样的东西

// Abstraction of your commands / results
enum Command {
    case Command1(arg: Float)
    case Command2(arg: Int, arg2: Int)
}

struct CommandResult {
    let command: Command
    let data: NSData
}

extension Command {
    func toByteCommand() -> NSData {
        return NSData()
    }
}

// Make sure to setup notifications before subscribing to returned observable!!!
func processCommand(notifyCharacteristic: Characteristic,
                    _ writeCharacteristic: Characteristic,
                    _ command: Command) -> Observable<CommandResult> {

    // This observable will take care of accumulating data received from notifications
    let result = notifyCharacteristic.monitorValueUpdate()
        .takeWhile { characteristic in
            // Your logic which know when to stop reading notifications.
            return true
        }
        .reduce(NSMutableData(), accumulator: { (data, characteristic) -> NSMutableData in
            // Your custom code to append data?
            if let packetData = characteristic.value {
                data.appendData(packetData)
            }
            return data
        })

    // Your code for sending commands, flatmap with more commands if needed or do something similar
    let query = writeCharacteristic.writeValue(command.toByteCommand(), type: .WithResponse)

    return Observable.zip(result, query, resultSelector: { (result: NSMutableData, query: Characteristic) -> CommandResult in
        // This block will be called after query is executed and correct result is collected.
        // You can now return some command specific result.

        return CommandResult(command: command, data: result)
    })
}

// If you would like to serialize multiple commands, you can do for example:
func processMultipleCommands(notifyCharacteristic: Characteristic,
                             writeCharacteristic: Characteristic,
                             commands: [Command]) -> Observable<()> {
    return Observable.from(Observable.just(commands))
        // concatMap would be more appropriate, because in theory we should wait for 
        // flatmap result before processing next command. It's not available in RxSwift yet.
        .flatMap { command in
            return processCommand(notifyCharacteristic, writeCharacteristic, command)
        }
        .map { result in
            return ()
        }
}

Answer 2

分割或reg exp

var id = this.id.split("_m")[1]

或

var id = this.id.match(/\d+$/)[0];

或者更好的是，使用数据属性

<div data-mid="123">

并引用它

$("[data-mid]").on("click", function () {
    var id = $(this).data("mid");
});

Answer 3

试试这个，

 $("[id^='viewer_']").click(function () {
    var number = this.id.match(/\d+$/)[0];
 });

Answer 4

正如@Wax Cage所提到的，更好的方法是使用类和数据属性来更好地组织。例如：

<div class="viewer" data-viewer-id="1">...</div>

$('.viewer').on('click', function() {
    var viewerId = $(this).data('viewerId');
    // ...
});

检测是否单击了包含id的id的div

4 个答案: