Question

如果您在page上向下滚动，则有4个视频。 Iam试图让您单击小视频中的一个，将视频移至大部分。如果您单击一个小视频，它将带您到YouTube。

您将在代码中看到一些变量，这些变量在另一个文件中。

这是我的代码：

class Sale_Invoice_Main_Page(forms.ModelForm):
    class Meta:
        model = SaleInvoice
        fields = '__all__'
        exclude = ['created_at','updated_at','transiction_type']
        widgets = {'description' : forms.TextInput(attrs={ 'placeholder' : 'description'}),
                   'invoice_no' : forms.TextInput(attrs={ 'readonly' : 'True'}),
                   'total_amount' : forms.TextInput(attrs={ 'readonly' : 'True'}),
                   'invoice_date' : forms.DateInput(attrs={ 'class' : "vdate" },format=('%d-%m-%Y')),
                   'due_date' : forms.DateInput(attrs={ 'readonly' : "True" },format=('%d-%m-%Y')),
                    }


class SaleInvoice(models.Model):
    customer = models.ForeignKey(Customer_data , on_delete=models.CASCADE)
    invoice_date = models.DateField(null=True,blank=True)
    invoice_no = models.PositiveIntegerField(unique=True)
    due_date = models.DateField(blank=True,null=True)
    address = models.TextField()
    total_amount = models.PositiveIntegerField(null=True,blank=True)
    description = models.TextField(null=True,blank=True)
    transiction_type = models.CharField(max_length=50,blank=True)
    author = models.CharField(max_length=30)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.address

{#     Date Picker#}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            $( ".vdate" ).datepicker({
                dateFormat: "dd-mm-yy"
            });
        } );
    </script>

有人可以帮我这个忙吗？

Answer 1

您必须点击preventDefault() ...这些小型视频是指向youtube的链接，因此默认情况下，浏览器将导航至该链接。在这种情况下，您不想导航到那里，而是要更改突出显示的视频。

事件接口的preventDefault（）方法告诉用户代理，如果未明确处理事件，则不应该照常执行其默认操作。

[Source]

$('.video').click(function(event) {

  // event is the action of the click
  event.preventDefault();

  // run your code to display the code into the "larger" box
  renderVideo();

});

无论何时执行某项操作（例如提交表单），都可以使用event.preventDefault()来更改浏览器的行为。

影片onclick切换至原处

1 个答案: