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

时间:2016-08-29 14:18:44

标签: javascript jquery html css ajax

我的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之后的数字,但我无法确定使用哪个函数。

4 个答案:

答案 0 :(得分:2)

为什么不使用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 ()
        }
}

答案 1 :(得分: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");
});

答案 2 :(得分:2)

试试这个,

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

答案 3 :(得分:1)

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

<div class="viewer" data-viewer-id="1">...</div>
$('.viewer').on('click', function() {
    var viewerId = $(this).data('viewerId');
    // ...
});